Bootstrap-carousel延迟加载程序

Question

我已经在我的网页上运行了bootstrap carousel，我想让它延迟加载。我在互联网上找到了这段代码：

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

这会导致轮播在单击next按钮(或prev)按钮时“加载”当前图像。我希望它加载的不是当前图像，而是之后的图像，以及当前图像前面的图像，这样我仍然可以看到漂亮的滑动动画。而不是加载图像。

所以我的问题是，当单击next按钮时，如何将lazy-load-src设置为前一个图像和下一个图像的src？

Answer 1

有几个选项，这取决于您需要的精度，但您应该将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'));
});

Answer 2

我已经更新了Sherbrows的答案，支持Bootstrap v3和随机开始索引。我用的是一页缩略图。当用户单击拇指时，旋转木马应该从该索引处开始。

显示旋转木马

function showGallery(startIndex) {
    //Load first and second image
    var imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 1) + ') img');
    imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
    imageElement = $('#fullscreengallery .item:nth-child(' + (startIndex + 2) + ') img');
    imageElement.attr('src', imageElement.attr('data-lazy-load-src'));
    //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('src')) {
        nextImage.attr('src', nextImage.attr('data-lazy-load-src'));
    }
});

Answer 3

我把Arnoud Sietsema的回答更进一步。您的carousel中的图像可以从加载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'));
    }


});

不同的是，当试图加载下一张幻灯片时，它首先被加载到“引擎盖下”，并且只有在加载时才被插入到旋转木马中。因此，加载的图像将一直显示，直到图像完全加载。

此外，旋转木马现在可以在两个方向上移动。