Jquery 引导转盘延迟加载程序

我已经让引导转盘在我的网页上工作，我希望它延迟加载。 我在互联网上找到了这段代码：

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

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

---

因此，我的问题是，单击“下一步”按钮时，如何将上一张图像和下一张图像的延迟加载src设置为src？

根据您需要的精度，有几个选项，但您应该将

延迟加载src

保留为自己的

img

标记

您可以使用选择器，输入

数据-

属性，并使用该属性选择要加载的下一幅图像。但这很混乱

我认为您最好的拍摄方法是在项目上使用该方法，以便在

slided

上加载下一张图像。比如：

$（'myCarousel'）。在（'slided'，function（）上{
var$nextImage=$（'.active.item'，this.next（'.item'）.find（'img'）；
$nextImage.attr（'src'，$nextImage.data（'lazy-load-src'）；
});

我更新了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'));
    }
});

---

我进一步接受了阿诺德·西塞马的回答。旋转木马中的图像可以从加载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'));
    }


});

（'slided.bs.carousel'，function（）上的{ //惰性负载 var nextImage=$（'.active.item'，this.next（'.item'）.find（'img'）； //如果没有“下一步”，请选择“第一步” 如果（nextImage.length==0）{ nextImage=$（“#全屏画廊。项目：第n个孩子（1）img”）； } //如果尚未设置源，请设置源 if（nextImage.attr（'data-loaded'）='0'）{ var$downloadingImage=$（“”）； $downloadingImage.load（函数（）{ prevImage.attr（“src”，$（this.attr（“src”）； prevImage.attr（'data-loaded'，'1'）； }); $downloadingImage.attr（“src”），prevImage.attr（“data-src”）； } }); 不同之处在于，当尝试加载下一张幻灯片时，它首先加载到“引擎盖下”，并且仅在加载时才插入旋转木马。结果，将显示加载图像，直到图像完全加载

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