Question

我的网页上有自举轮播，我想让它懒得加载。我在互联网上找到了这段代码：

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

这会导致轮播在单击下一个按钮（或上一个）按钮时“加载”当前图像。我希望它不加载当前图像，而是加载之后的图像，以及当前图像前面的图像，这样我仍然可以获得漂亮的滑动动画。而不是加载图像。

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

Answer 1

根据您需要的精确度，有多种选择，但您应该将lazy-load-src保留为自己的img标记。

您可以使用选择器，输入data-属性并使用它来选择要加载的 next 图像。但这很麻烦。

我认为您的最佳镜头是在您的商品上使用.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的答案更进了一步。您的旋转木马中的图像可能会开始加载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'));
    }


});

不同之处在于，当试图加载下一张幻灯片时，它首先在“引擎盖下”加载，并且仅在加载时插入到转盘中。因此，显示加载图像，直到图像完全加载。

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

Bootstrap-carousel懒惰装载机

3 个答案: