0

我在 Phonegap 的移动应用程序（iOS 和 Android）中使用 Owl carousel 插件，我可以拥有超过 100 个或数千个猫头鹰项目或幻灯片。当 DOM 变大时，可能会因为内存问题导致应用程序崩溃。

我想要实现的是在用户滑动时删除“不”可见的 div（猫头鹰项目）。

这是初始化 OwlCarousel 后生成的示例 DOM：

<div class="owl-wrapper" style="width: 8164px; left: 0px; display: block; -webkit-transition: all 0ms ease; transition: all 0ms ease; -webkit-transform: translate3d(0px, 0px, 0px);">
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>Start</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>1</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>2</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>3</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>4</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>5</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>6</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>7</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>8</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>9</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>10</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>11</h1>
    </div>
</div>
<div class="owl-item" style="width: 314px;">
    <div class="item dodgerBlue">
        <h1>12</h1>
    </div>
</div>

当项目数量变大时，这可能会导致内存问题并导致应用程序崩溃。我在我的 iOS 应用程序中尝试过这个，但它在显示 OWL Carousel 之前就崩溃了。

我想要实现的是从 DOM 中删除当前不可见的元素，然后在它们与当前可见元素接近时添加它们。

例如，当前可见项目是项目编号 7，项目 5,6,7,8,9 应该只在 DOM 中，其余部分被删除。当用户从项目 7 滑动到项目 8 时，项目 6、7、8、9、10 现在应该在 DOM 中。

到目前为止，除了初始化猫头鹰轮播外，我还没有尝试过编码。

我不确定我的方法是否是最好的，但我在继续之前征求其他人的意见。

为 Owl Carousel 处理这种场景的最佳方法是什么？

笔记 ：

TurnJS ( http://www.turnjs.com ) 也使用了这种方法。不知道这是否有帮助。

希望大家给点建议和意见。

4

0 回答 0