jquery - Bootstrap-轮播延迟加载程序

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'));
});