在水平滑块中延迟加载图像 [英] Lazyloading images in horizontal slider
问题描述
我使用jquery lazyload和一个阈值来暂停加载此站点上的图像: https:// bm-translations。 de /#leistungen
I am lazyloading the images on this site with jquery lazyload and a treshold: https://bm-translations.de/#leistungen
//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
$("img.lazy").lazyload({
threshold : 400
});
});
所以图像 src
被<$替换C $ C>数据原始。当我滚动到元素时,它应该将其更改为 src
,因为它。
So Images src
is replaced by data-original
. When I scroll to the element it should change it to src
, as it.
但出于某种原因它正如您所看到的,加载引导滑块中的图像太慢(当我点击它或它自动滑动时某些图像没有加载)。如何调整此代码,所以它也适用于此?
But out of some reason its loading the images in the bootstrap-slider too slow (when I click to it or its autosliding some images havent loaded), as you can see. How to adjust this code, so its working for this as well?
滑块的结构如下: 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);
}
}
});
如何修复它,所以它在点击/自动滑动之前延迟加载或至少延迟加载带阈值的整个轮播图像?
How to fix it, so its either lazy-loading before click/autoslide or at least to lazyload the whole carousel images with threshold?
推荐答案
我建议您使用 owl.carousel.js 插件。它更好,功能更多。
I suggest you use the "owl.carousel.js" plugin. It is much better and has more features.
$('.owl-carousel').owlCarousel({
items:1,
lazyLoad:true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
</div>
这篇关于在水平滑块中延迟加载图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!