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

【问题标题】：Owl Carousel - Add/Remove items dynamicallyOwl Carousel - 动态添加/删除项目
【发布时间】：2017-10-30 06:18:32
【问题描述】：

我正在将 owl carousel 集成到 iPad 应用程序中。如果用户不过滤要在轮播中显示的项目，则轮播可以有 1000 多个项目。

为了帮助解决性能和加载问题，我目前的轮播从 25 个项目开始，然后当用户在轮播中导航时，它会动态地将另外 25 个项目添加到轮播的末尾。每当用户接近轮播结束的一半时，它就会执行此操作，直到没有更多要添加的项目为止。

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

我在想我需要从轮播的开头删除项目，但我正在为如何做到这一点画空白。这里有几个注意事项：

我最初的想法是尝试在轮播中保留 50 个项目，然后当用户在轮播中来回导航时，根据需要从任一端添加/删除项目。我只是似乎有编码障碍，因为我不知道如何开始。

谢谢大家！

【问题讨论】：

【解决方案1】：

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

【讨论】：

我实际上在应用程序中使用了 LazyLoading，但这个轮播有可能拥有多达 12,000 张图像，而且它似乎仍然会导致应用程序陷入困境/崩溃。这就是我正在考虑对项目进行这种额外的动态加载/卸载的原因。
有变化...你测试了吗？延迟加载使用 ajax，它不会在视图之前加载图像。
ps。如果您需要这种带有加载/卸载功能的 12.000 个项目的解决方案，那么您需要创建自己的插件。我不知道任何可以以这种方式工作的轮播插件。但是轮播并不难写。
谢谢。我将从 repo 中获取最新的 pull，但我两周前才开始这样做，所以我认为我应该拥有最新的轮播代码。我可能不得不尝试自己的旋转木马，但我希望我不必这样做。

【解决方案2】：

您可以使用remove.owl.carousel 将元素从轮播中移除，它不会干扰电流，用户不会感觉到轮播有任何变化。我已经这样做了

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

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

【讨论】：