尽管在window.load函数中，JavaScript代码仍然在页面加载时加载

Question

可能的重复：
使用jQuery或ASP.NET，如何下载页面，然后异步下载页面上的图像？

我想通过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

我建议使用预加载程序，而不是简单地一次设置所有背景图像属性。

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