在LaLoLoad之后在OWL Carousel上添加类

时间:2015-09-29 13:57:58

标签: javascript jquery lazy-loading owl-carousel

我正在使用OWL Carousel,尝试在lazyLoad之后将.border-red添加到<div class="item">,意味着在lazyLoad afterLazyLoad之后调用此函数

延迟加载示例$(".item").addClass("border-red");。意味着在OWLCarousel lazyLoaded之后添加类函数执行。

JS

$(document).ready(function() {

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

});

HTML

<div id="owl-demo" class="owl-carousel">
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
</div>

这是OWLCarousel Options and Callbacks
OWLCarousel demo&gt;
如何在OWLCarousel lazyLoaded之后执行addclass函数?

1 个答案:

答案 0 :(得分:4)

试试这个:

$(document).ready(function() {

   $("#owl-demo").owlCarousel({
      items : 4,
      lazyLoad : true,
      navigation : true,
      afterLazyLoad: function(elem){
          $(elem).addClass("border-red");
      }
   });

});

此处afterLazyLoad是回调函数