在水平滑块中延迟加载图像

我懒得用jquery lazyload和一个阈值加载这个站点上的图像： https ： //bm-translations.de/#leistungen

//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload $(function() { $("img.lazy").lazyload({ threshold : 400 }); }); 

所以Images src被data-original取代。 当我滚动到元素时，它应该将其更改为src ，就像它一样。

但出于某种原因，它加载引导滑块中的图像太慢（ 当我点击它或它的自动滑动一些图像没有加载 ），你可以看到。 如何调整此代码，以便它也适用于此？

滑块的结构如下： https ： //www.w3schools.com/bootstrap/bootstrap_carousel.asp

Carousel JS是：

 $('#myCarousel').carousel({ interval: 9000, }); // handles the carousel buttons $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); var id = id_selector.substr(id_selector.length -1); id = parseInt(id); $('#myCarousel').carousel(id); $('[id^=carousel-selector-]').removeClass('selected'); $(this).addClass('selected'); }); // when the carousel slides, auto update $('#myCarousel').on('slide.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); id = parseInt(id)+1; $('[id^=carousel-selector-]').removeClass('selected'); $('[id=carousel-selector-'+id+']').addClass('selected'); }); 

我试过这个，但后来又不再滑动了：

 $('#myCarousel').carousel({ interval: 9000, scroll: { onBefore: function( data ) { var $current = data.items.visible.first(), visible = data.items.visible, src = visible.data('src'); visible.attr('src', src); } } }); 

如何解决它，所以它在点击/自动滑动之前是懒惰加载还是至少延迟加载整个轮播图像的阈值？

Answer 1

我建议你使用“ owl.carousel.js ”插件。 它更好，function更多。

 $('.owl-carousel').owlCarousel({ items:1, lazyLoad:true, loop:true, margin:10, autoplay:true, autoplayTimeout:3000, autoplayHoverPause:true, });