延迟加载

设定

延迟图像加载。 用户滚动到它们之前,不会加载视口外部的图像。 非常适合移动设备加速页面加载。

Img need special class class="lazyOwl" and path to image in data-src="":

<img class="lazyOwl" data-src="path-to-your-image">

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    items : 4,
    lazyLoad : true,
    navigation : true
  }); 

});
<div id="owl-demo" class="owl-carousel">
  <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt=" 懒猫头鹰形象 "></div>
  <div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt=" 懒猫头鹰形象 "></div>
</div>
#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

更多演示