Bootstrap-carousel懒惰装载机

Question

我有我的网页上的bootstrap轮播,我希望它是懒惰的负载.我在互联网上找到了这段代码:

$("#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()在你的物品上使用这个方法,所以在slid你加载下一个图像.就像是 :

$('#myCarousel').on('slid', function() {
    var $nextImage = $('.active.item', this).next('.item').find('img');
    $nextImage.attr('src', $nextImage.data('lazy-load-src'));
});