2

多くの大きな画像を含むサイトがあり、小さな UI グラフィックが読み込まれるまで読み込みを遅らせたいと考えています。私は次のようなhtmlを使用しました：

 <span id="img0" class="preload" data-src="/images/tomato.jpg"></span>
 <span id="img1" class="preload" data-src="/images/squash.jpg"></span>

クラス「プリロード」のすべてのインスタンスを収集し、ID で並べ替えて、画像を呼び出す html に追加できると考えました。

問題は、毎回同じ画像をロードしていることです。

これがフィドルです：http://jsfiddle.net/nUFUW/

回答: (上記の Html)。ID の順序で画像をロードし、検証する html も含めるには、次のようにします。

jQuery(document).ready(function($) {

    $(".preload").each(loadImages);

        function loadImages (i, elem) {

            var numItems = $('.preload').length;
            for (var i = 0; i < numItems; i++) {

                $("#img" + i).each(function(){
                    var thisSource = $(this).data('src');
                    $(this).html('<img src="' + thisSource + '" alt=""/>');
                });
            }

    } //<end loadImages function>

});

Span タグで置き換えていないページ内の画像は、Span の画像より先に読み込まれることに注意してください。これは、「ドキュメントの準備完了」が発火する前にすべてが起こっているためだと思います。したがって、UI の各画像にタグを付ける必要はなく、大きな画像だけにタグを付ける必要がありました。今では、大きな画像が最後に読み込まれます。これが私の好みです。:)

4

1 に答える 1

0

次のようになります。

jQuery(window).load(function($) {

    function loadImage(i){
        if($("#img" + i).size() == 0)
            return;
        $("#img" + i).load(function(){
            loadImage(i + 1);
        });
        $("#img" + i).attr('src', $("#img" + i).data("src"));
    }
    loadImage(0);

});

</ p>

于 2012-11-09T03:48:39.127 に答える