Owl Carousel - 动态添加/删除项目

时间:2017-08-07 20:14:42

标签: javascript jquery owl-carousel owl-carousel-2

我将猫头鹰旋转木马整合到iPad应用程序中。如果用户没有过滤掉要在旋转木马中显示的项目,旋转木马可以有1000件物品。

为了帮助解决性能和加载问题,我目前只有25个项目的旋转木马,然后当用户浏览旋转木马时,它将动态添加另外25个项目到旋转木马的末尾。只要用户在旋转木马的末端走到中途,直到没有更多的项目要添加,它就会这样做。

现在发生的问题是当轮播到达300张图像时仍然存在一些内存问题。应用程序将崩溃。

我原本以为我需要从旋转木马的开头删除项目,但我在如何使这项工作上画空白。以下是一些警告:

  • 当项目被预先添加到开头时,我需要能够保持轮播中的当前位置。
  • 旋转木马需要保持与开始阵列相同的顺序。
  • 用户不应该注意到轮播中的变化,不会影响用户体验。

我最初的想法是尝试在旋转木马中保留50个项目,然后当用户在旋转木马中来回导航时,根据需要在任一端添加/删除项目。我似乎只是有编码器阻止,因为我无法看到如何开始。

谢谢你们!

2 个答案:

答案 0 :(得分:0)

只需使用其中一个函数来延迟加载:

http://www.landmarkmlp.com/js-plugin/owl.carousel/demos/lazyLoad.html

答案 1 :(得分:0)

您可以使用remove.owl.carousel从旋转木马中删除元素,它不会扰乱当前流量,用户也不会感觉旋转木马有任何变化。 我做过像

$('#owl-carousel').trigger('remove.owl.carousel',0).trigger('refresh.owl.carousel');

这里0是元素编号,你可以在每个元素添加时使用它。