-1

可能重复：
使用 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>

但这不起作用，我所有的背景图像仍然在第一次加载时加载。如何使其工作，因此它仅在页面加载后添加此代码。

我的意思是我可以把这个放在身体的点击事件中，但这只是愚蠢的。

4

1 回答 1

0

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

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();
});
于 2012-10-03T15:39:54.557 回答