2

Web ページでブートストラップ カルーセルが動作していて、遅延読み込みを行いたいと考えています。インターネットで次のコードを見つけました。

$("#myCarousel").bind("slid", function(){
    $img = $(".active img", this);
    $img.attr("src", $img.data('lazy-load-src'));
});

これにより、次のボタン (または前のボタン) がクリックされたときに、カルーセルが現在の画像を「ロード」します。現在の画像ではなく、その後の画像と現在の画像の前の画像をロードして、スライドアニメーションがうまくいくようにします。読み込み中の画像ではありません。

だから私の質問は、次のボタンがクリックされたときに、前の画像と次の画像の src に lazy-load-src を設定するにはどうすればよいですか?

4

3 に答える 3

7

lazy-load-src必要な精度に応じていくつかのオプションがありますが、独自のimgタグを保持する必要があります。

セレクターをdata-使用して属性を入力し、それを使用して次にロードする画像を選択できます。しかし、これは厄介です。

あなたのベストショットは.next()、アイテムにメソッドを使用してslid、次の画像をロードすることだと思います。何かのようなもの ：

$('#myCarousel').on('slid', function() {
    var $nextImage = $('.active.item', this).next('.item').find('img');
    $nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
于 2012-07-03T18:08:32.367 に答える
1

Arnoud Sietsemaの答えをさらに一歩進めました。カルーセル内の画像には、最初から GIF が読み込まれている可能性があります。それで...

カルーセルを表示する

function showGallery(startIndex) {
    //Load first, second and last image
    var imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 1) + ') img');
    imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
    imageElement.attr('data-loaded', '1');

    imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 2) + ') img');
    imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
    imageElement.attr('data-loaded', '1');

    imageElement = $('#myCarousel .item:last img');
    imageElement.attr('src', imageElement.attr('data-src'));
    imageElement.attr('data-loaded', '1');

    //Init carousel
    $('#fullscreengallery').carousel(startIndex);
    //Show carousel
    $('#fullscreengallery').removeClass('hidden');
};

遅延読み込みを行う

$('#fullscreengallery').on('slid.bs.carousel', function() {
    //Lazy load
    var nextImage = $('.active.item', this).next('.item').find('img');
    //If no next, select first
    if(nextImage.length === 0){
        nextImage = $('#fullscreengallery .item:nth-child(1) img');
    }

    //Set the source if it hasn't been set already
    if (nextImage.attr('data-loaded') == '0') {
        var $downloadingImage = $("<img>");
        $downloadingImage.load(function(){
        nextImage.attr("src", $(this).attr("src")); 
            nextImage.attr('data-loaded', '1');
        });
        $downloadingImage.attr("src", nextImage.attr('data-src'));
    }

    var prevImage = $('.active.item', this).prev('.item').find('img');
    //If none, select last
    if(prevImage.length === 0){
        prevImage = $('#myCarousel .item:last img');
    }
    //Set the source if it hasn't been set already
    if (prevImage.attr('data-loaded') == '0') {
        var $downloadingImage = $("<img>");
        $downloadingImage.load(function(){
            prevImage.attr("src", $(this).attr("src")); 
            prevImage.attr('data-loaded', '1');
        });
        $downloadingImage.attr("src", prevImage.attr('data-src'));
    }


});

違いは、次のスライドを読み込もうとすると、最初に「ボンネットの下」に読み込まれ、読み込まれたときにのみカルーセルに挿入されることです。その結果、画像が完全に読み込まれるまで、読み込み中の画像が表示されます。

また、カルーセルを両方向に移動できるようになりました。

于 2016-02-03T18:58:45.960 に答える