-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 に答える