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

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

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

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

1 个答案: