Overview

娣诲姞lazyload璁剧疆锛?/p>

lazyLoad: true

LazyLoad HTML缁撴瀯闇€瑕?code>class="owl-lazy"鍜?code>data-src="url_to_img"鎴栬€?code>data-src-retina="url_to_highres_img"銆傚鏋滀綘涓嶆槸鍦?code><img>涓婅缃笂闈㈢殑灞炴€э紝鑰屾槸鍦ㄥ叾瀹僪tml DOM鍏冪礌涓婏紝閭ｄ箞Owl浼氬湪璇ュ厓绱犱笂浣跨敤鍥剧墖鏈€涓哄唴鑱旂殑鑳屾櫙鍥惧儚銆?/p>

Setup

$('.owl-carousel').owlCarousel({
    items:4,
    lazyLoad:true,
    loop:true,
    margin:10
});

HTML:

<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>