在 LazyLoad 之后在 OWL 轮播中添加 class

Question

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

示例：$(".item").addClass("border-red"); 延迟加载时。表示在 OWLCarousel lazyLoaded.

之后执行添加 class 函数

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
猫头鹰旋转木马 demo >
OWLCarousel lazyLoaded 后如何添加class 函数执行？

Answer 1

试试这个：

$(document).ready(function() {

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

});

这里afterLazyLoad是一个回调函数

在 LazyLoad 之后在 OWL 轮播中添加 class

Add class on OWL Carousel afterLazyLoad

javascript

jquery

lazy-loading

owl-carousel