在LazyLoad之后在OWL Carousel上添加类答案

【问题标题】：Add class on OWL Carousel afterLazyLoad在LazyLoad之后在OWL Carousel上添加类
【发布时间】：2015-09-29 13:57:58
【问题描述】：

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

示例：$(".item").addClass("border-red"); 延迟加载时。表示在 OWLCarousellazyLoaded 之后添加类函数执行。

$(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 >
OWLCarousellazyLoaded后如何添加类函数执行？

【问题讨论】：

您需要在选项中将afterLazyLoad 设置为true，就像使用lazyLoad 和navigation 一样。您应该能够使用此选项更新访问回调函数。
@TylerSloan 嗨，谢谢，但是如何访问回调函数？
@vijayP 的回答很好。
您的演示链接转到 sp@m 站点

标签： javascript jquery lazy-loading owl-carousel

【解决方案1】：

试试这个：

$(document).ready(function() {

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

});

这里afterLazyLoad是一个回调函数

【讨论】：

刚刚看到了owl carousel的实现。上面的代码做了小的改动。您能否再试一次使用这个更新的代码？
您好，它可以工作，但是进度条消失了，意味着进度条没有显示，这是进度条的演示：owlgraphic.com/owlcarousel/demos/progressBar.html
一定是一些 CSS 定位问题。可能是进度条与您的红色边框重叠。你能看看那个吗？
我已经看到了 InspectElement 的 HTML 源代码，但没有进度条。如果使用您给定的 JS，进度条调用功能将不起作用。
哦..这很奇怪。这是支持的方式，afterLazyLoad 回调是有效的回调函数，根据他们的文档。因此，如果它不使用进度条；这意味着他们的库代码中存在错误。