添加lazyload设置:
lazyLoad: true
LazyLoad HTML结构需要class="owl-lazy"
和data-src="url_to_img"
或者data-src-retina="url_to_highres_img"
。如果你不是在<img>
上设置上面的属性,而是在其它html DOM元素上,那么Owl会在该元素上使用图片最为内联的背景图像。
$('.owl-carousel').owlCarousel({
items:4,
lazyLoad:true,
loop:true,
margin:10
});
<div class="owl-carousel">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=2" data-src-retina="http://placehold.it/350x250&text=2-retina" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=9" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=10" alt="">
<img class="owl-lazy" data-src="http://placehold.it/350x250&text=11" alt="">
</div>