Question

Possible Duplicate:
Using jQuery or ASP.NET, how to download page and then asynchrously download images on page?

I want to add background images via JS code implemented in window.load() function.
Basically, what I want is quicker page load, and then when the page is rendered I want to add background images to my elements.

I use this code:

 <script>
    $(window).load(function() {
    $('#image2').css('background-image','url(images/people-big-2.jpg)');
        $('#image3').css('background-image','url(images/people-big-3.jpg)');
        $('#image4').css('background-image','url(images/people-big-4.jpg)');
        $('#image5').css('background-image','url(images/people-big-5.jpg)');
        $('#image5').css('background-image','url(images/people-big-6.jpg)');
        $('#image7').css('background-image','url(images/people-big-7.jpg)');
        $('#image8').css('background-image','url(images/people-big-8.jpg)');
        $('#image9').css('background-image','url(images/people-big-9.jpg)');
        $('#image10').css('background-image','url(images/people-big-10.jpg)');

        $('#image11').css('background-image','url(images/places-big-1.jpg)');
        $('#image13').css('background-image','url(images/places-big-3.jpg)');
        $('#image16').css('background-image','url(images/places-big-6.jpg)');
        $('#image17').css('background-image','url(images/places-big-7.jpg)');
        $('#image18').css('background-image','url(images/places-big-8.jpg)');
        $('#image19').css('background-image','url(images/places-big-9.jpg)');
        $('#image21').css('background-image','url(images/places-big-11.jpg)');
        $('#image24').css('background-image','url(images/places-big-14.jpg)');
        $('#image25').css('background-image','url(images/places-big-15.jpg)');
        $('#image26').css('background-image','url(images/places-big-16.jpg)');

        $('#image27').css('background-image','url(images/things-big-1.jpg)');
        $('#image28').css('background-image','url(images/things-big-2.jpg)');
        $('#image29').css('background-image','url(images/things-big-3.jpg)');
        $('#image30').css('background-image','url(images/things-big-4.jpg)');
        $('#image31').css('background-image','url(images/things-big-5.jpg)');
        $('#image32').css('background-image','url(images/things-big-6.jpg)');
        $('#image33').css('background-image','url(images/things-big-7.jpg)');
        $('#image34').css('background-image','url(images/things-big-8.jpg)');
        $('#image35').css('background-image','url(images/things-big-9.jpg)');
        $('#image36').css('background-image','url(images/things-big-10.jpg)');
        $('#image37').css('background-image','url(images/things-big-11.jpg)');
        $('#image38').css('background-image','url(images/things-big-12.jpg)');
        $('#image39').css('background-image','url(images/things-big-13.jpg)');

        $('#image40').css('background-image','url(images/water-big-1.jpg)');
        $('#image41').css('background-image','url(images/water-big-2.jpg)');
        $('#image42').css('background-image','url(images/water-big-3.jpg)');
        $('#image43').css('background-image','url(images/water-big-4.jpg)');
        $('#image44').css('background-image','url(images/water-big-5.jpg)');
        $('#image45').css('background-image','url(images/water-big-6.jpg)');
        $('#image46').css('background-image','url(images/water-big-7.jpg)');
        $('#image47').css('background-image','url(images/water-big-8.jpg)');
        $('#image48').css('background-image','url(images/water-big-9.jpg)');
        $('#image49').css('background-image','url(images/water-big-10.jpg)');

            });

             </script>

But this doesn’t work, all of my background images are still loaded on first load. How to make it work, so it adds this code only after the page has loaded.

I mean I can put this inside click event for the body, but that is just stupid.

Answer 1

I suggest using a preloader rather than simply setting all the background image properties at once.

http://jsfiddle.net/GBvp4/2/

HTML

<div data-img="foo.jpg"></div>
<div data-img="bar.jpg"></div>
<div data-img="foobar.jpg"></div>
<div data-img="barfoo.jpg"></div>​

JS

$(document).ready(function(){
    var imagesToPreload = $("div[data-img]").map(function(){
       return $(this).attr("data-img"); 
    }).get();

    function preloader() {
        var src = imagesToPreload.shift();
        if (!src) return;
        var img = new Image();
        $(img).load(function() {
            $('div[data-img="' + src + '"]').css('background-image', 'url(' + src + ')');
            preloader();
        }).error(function() {
            $('div[data-img="' + src + '"]').css('background-image', 'url(' + src + ')');
            preloader();
        });
        img.src = src;
    }
    preloader();
});