自助式转盘式懒人装载机 [英] Bootstrap-carousel lazy loader

问题描述

我的网页上有引导传送带，我希望它可以延迟加载. 我在互联网上找到了这段代码:

I have got the bootstrap carousel working on my web page and i want it to lazy load. I have found this piece of code on the internet:

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

当单击下一个按钮(或上一个)按钮时，这会导致轮播加载"当前图像.我希望它加载的不是当前图像，而是那之后的图像，以及当前图像前面的图像，这样我仍然具有不错的滑动动画.而不是加载图像.

This causes the carousel to "load" the current image when the next button (or prev) button is clicked. I want it to load not the current image but the image after that, and the image in front of the current image, so that i still have the nice sliding animation. And not a loading image.

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

So my question is how do I set the lazy-load-src to src of the previous image and of the next image when the next button is clicked?

推荐答案

有多种选择，具体取决于您所需的精度，但是您应将lazy-load-src保留为自己的img标记.

There are several options, depending on the precision you need, but you should keep the lazy-load-src to their own img tags.

您可以使用选择器，放入data-属性，然后使用该选择器选择要加载的下一个图像.但这很混乱.

You can use selectors, put in data- attributes and use that to select your next image to load. But this is messy.

我认为您最好的选择是在商品上使用 .next() 方法，以便在slid上加载下一张图片.像这样的东西:

I think your best shot is using the .next() method on your items, so that on slid you load the next image. Something like :

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

这篇关于自助式转盘式懒人装载机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！