幻灯片DOM操作

Question

我一直在研究各种基于jQuery的幻灯片脚本，对所使用的不同方法以及它们如何处理基于CSS3的转换和DOM操作感兴趣。我有一个幻灯片基于jQuery的WordPress插件，但它有点过时了，所以我正在努力重新编码。

我对jQuery非常熟悉，多年来一直在使用它，并且编写了一个公开可用的插件，我已经看到了一些极端的用例，其中50多个图像已被用于高达1920x1200 +的图像（主要是摄影师）。

在进行一些关于比我已经更好地处理这种情况的最佳方法的研究时，我看到了两种流行的趋势，我想知道哪种情况更好。

首先，只需将“幻灯片”放在容器内，然后将其设置为动画。通常，容器绝对定位为将其从文档流中取出并加快速度（特别是在使用CSS3时）。

接下来是在DOM中保留4到8个'幻灯片'，并在用户导航时附加/删除它们。

哪种方法更好？从DOM中添加/删除被认为是最昂贵的更改，但是在这种情况下，它比在文档流程之外操作包含50多个超大图像的容器便宜吗？特别是在移动设备上。

Answer 1

我会在两者之间做点什么..除了dom中显示的那些之外，我会保留几个额外的图像..所以每当用户向左或向右滑动时...我只会显示一个图像已被下载并附加到dom（非常便宜的操作）..

同时我会删除远离dom的图像并将它们缓存到javascript数组中。

这样我就不会给DOM带来太多图像负担（你不知道滑块预先包含了多少图像），同时我也不会试图操纵太多的图像来破坏用户体验DOM明智

Answer 2

如果您想要使用大量幻灯片来最有效地使用内存，那么您可能希望一次只加载一些幻灯片图像（接下来的几张幻灯片），而不是整个幻灯片。

同时，您需要预先加载一些即将推出的图像，以便在您想要显示它们时准备就绪，因为最耗时的任务是在显示之前通过互联网将图像下载到本地浏览器。 / p>

如果您只是预加载了一些即将推出的图片，那么您可以：

1. 将它们预加载到您在javascript中保存的img对象，然后在需要时将其插入DOM。

2. 将它们预加载到已存在于DOM但隐藏的img对象中，然后当您想要显示它时，可以使其可见。

只要您预先仅预先加载几张图像并删除之前显示的图像，以便在不再需要时它们不会保留在内存中，这两种方法之间应该没有显着差异。如果你真的想知道它们之间是否存在任何可测量的差异（在内存消耗方面），你必须尝试设计性能测试以便测量。

---

我过去制作了可以显示大量图像的幻灯片，最重要的是要确保在幻灯片运行时不会累积内存使用量并使用越来越多的内存。内存使用率应该随着幻灯片放映最初运行而上升，然后应该变平并停止增加，因为当您加载较新的图像时，您将达到稳定状态，即释放旧图像。这在浏览器中有点难以衡量，因为它们还有内存缓存和延迟垃圾收集，这会使幻灯片显示实际使用的内存变得模糊，但是如果让它运行得足够长并且有大量图像，它会继续永远向上，然后你知道你有一个问题要解决。如果它平稳并且停止上升，那么你可能很好。