자바 스크립트 코드는 여전히 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> 

하지만이 작동하지 않습니다

은이 코드를 사용합니다. 그것을 작동시키는 방법, 그래서 페이지가 적재 된 후에이 부호를 추가한다.

본인의 몸에 click 이벤트를 넣을 수는 있지만 그건 어리석은 짓입니다.

Answer 1

단순히 모든 배경 이미지 속성을 한 번에 설정하는 대신 프리 로더를 사용하는 것이 좋습니다.

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