-1

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.

Community
  • 1
  • 1
fluxus
  • 559
  • 5
  • 15
  • 29
  • Your code as is will wait until all existing css scripts and images are loaded, and then run. Isn't that what you want it to do? – Kevin B Oct 03 '12 at 14:58
  • I think it may be useful to utilize your code instead of writing down 49 lines manually. – Den T Oct 03 '12 at 14:59
  • Sorry if this is a stupid question, but how do you know the background images are not being loaded after the "page load"? Did you use the network inspector tab of your browser tools? Or are you eyeballing it by refreshing the page? – Giscard Biamby Oct 03 '12 at 15:03
  • @kevinB I want the page rendered(with my placeholders,#image2,#imeage2,etc), and only then after it is visible I want to add background images. – fluxus Oct 03 '12 at 15:03
  • @GiscardBiamby I am testing on pingdom tools – fluxus Oct 03 '12 at 15:04
  • So, you want to add an additional delay. The easiest way would be to use setTimeout. However, you should probably instead use an image preloading plugin/function rather than the quick fix you are using. – Kevin B Oct 03 '12 at 15:06
  • No, I wouldn't call it delay, I just want to have my JS executed after the page is visible by the user. If you want, you can check it at http://www.steveezell.com – fluxus Oct 03 '12 at 15:09
  • You said "the background images are still loaded on first load". What do you mean by that? – Giscard Biamby Oct 03 '12 at 15:10
  • I mean that the page takes too much time to load because all bg images are loaded on page load...I want the page to load faster and then set the bg images via JS – fluxus Oct 03 '12 at 15:12
  • 2
    I checked your site in pingdom tools and in my browser's dev tools; your question is malformed. The background images are loading after the page has loaded, exactly as $(window).load(function()...) would entail. – Giscard Biamby Oct 03 '12 at 15:14
  • The problem is loading 20+ images at once will cause the browser to appear as if it is still loading (because it is!). If you used a proper image preloading script this wouldn't happen. – Kevin B Oct 03 '12 at 15:15
  • I think this question is a duplicate. There are a lot of similar Q's about preloading images. – Giscard Biamby Oct 03 '12 at 15:17
  • @GiscardBiamby I guess I didn't saw it right, does this mean that all of the bg images are loaded after the page is visible? – fluxus Oct 03 '12 at 15:18
  • @KevinB I wasn't able to find any script that would let me preload background images, only the normal img with src tag. – fluxus Oct 03 '12 at 15:19
  • Don't focus on even needing a tag to begin with. Those preloaders are flawed in that they *usually* don't prevent the browser from loading it on page load. Instead, setup an array of image paths then write a self-calling function that steps through the array, preloading 2 or 3 images at a time. – Kevin B Oct 03 '12 at 15:22
  • 1
    Here's a very basic example: http://jsfiddle.net/GBvp4/2/ All of the images fail in this case though due to none of them existing. – Kevin B Oct 03 '12 at 15:35
  • Updated above comment's fiddle – Kevin B Oct 03 '12 at 15:38

1 Answers1

0

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();
});
Kevin B
  • 94,570
  • 16
  • 163
  • 180