【问题标题】:Deactive lazy load for owl carousel after it is already displayed猫头鹰轮播已显示后的无效延迟加载
【发布时间】:2020-01-23 10:33:30
【问题描述】:

大家好,我有一个我真的无法解决的问题。我在产品详细信息页面 (pdp) 上使用 owl carousel 来显示产品的多个图像。由于我想开始一个 AB 测试来更改图像的显示和数量,我使用 CSS 代码来隐藏 owl carousel 的控制按钮并一次显示所有图片,并且不再真正使用滑块选项:

preview slider

但现在我遇到的问题是第一张图片是预加载的,但是我添加后的所有新图片由于延迟加载而具有加载动画。

当我点击控制按钮时,它们会被加载,所以我想为什么不通过点击 jQuery 来伪造它,但 owl carousel 似乎无法识别它

jQuery('.owl-next').trigger('click');

此代码适用于所有其他元素,但不适用于控制按钮。您是否知道如何手动激活所有图像的加载?

提前致谢:)

【问题讨论】:

  • 我刚刚找到了一种解决方法,可以将 data-src 属性的值(因为图像存在那里)加载到我刚刚创建的 src 属性中:var newthumbnail = jQuery('.owl-item.loading:nth-child(1) .item a img').attr('data-src'); jQuery('.owl-item.loading:nth-child(1) .item a img').prop('src', newthumbnail);

标签: jquery css owl-carousel


【解决方案1】:

来自 API events 文档示例:

var owl = $('.owl-carousel');
owl.owlCarousel();

// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})

运气好的话,你只需要这样的东西:

owl.trigger('next.owl.carousel');

【讨论】:

  • 我已经尝试过了,但他似乎没有得到点击,这是主要问题:( 就好像 owl carousel 内部的某些东西会意识到我伪造了点击并想要真正的点击.
猜你喜欢
  • 2014-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多