JavaScript代碼仍然加載在頁面加載，儘管window.load功能是

Question

可能重複：
Using jQuery or ASP.NET, how to download page and then asynchrously download images on page?

我想通過在window.load執行JS代碼中添加背景圖片（）函數。 基本上，我想要的是更快的頁面加載，然後當頁面呈現時，我想添加背景圖像到我的元素。

我用這個代碼：

<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> 

但是，這並不工作，我所有的背景圖像仍在加載第一次加載。如何使它工作，所以它只在頁面加載後才添加此代碼。

我的意思是我可以把這個內部點擊事件的身體，但這只是愚蠢的。

Answer 1

我建議使用preloader而不是簡單地設置所有的背景圖像屬性。

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(); 
});