2

我的网页上有引导轮播，我希望它延迟加载。我在网上找到了这段代码：

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

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

所以我的问题是如何在单击下一个按钮时将lazy-load-src 设置为上一张图片和下一张图片的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 回答
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'));
    }
});
于 2014-06-16T10:00:33.830 回答
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 回答