4

我目前在我的网站上有一个搜索框，用于搜索图像并以列表元素的形式返回结果，如下所示：

<ul>
    <li rel="1"><img src="imgurl" /></li>
    <li rel="2"><img src="imgurl" /></li>
    <li rel="3"><img src="imgurl" /></li>
    <li rel="4"><img src="imgurl" /></li>
</ul>

然后每个图像都有一个与之关联的点击事件，它只是将叠加层添加到所点击图像的父 li 中。

有时我的搜索结果将包含 300 多个结果，这在桌面上不是什么大问题，但在移动设备上会导致巨大的延迟，例如，当有人单击图像以添加叠加层时，可能需要 4-5 秒出现叠加。

现在我想到了一种解决方法，如下所示：

  1. 将所有 li 元素添加到数组中（作为字符串而不是 DOM 元素）

  2. 销毁原有的 li 元素。

  3. 计算屏幕大小以及一次可以显示多少张图片

  4. 添加用于滚动列表的滑块 ui 元素

  5. 基于滑块的位置以及我们可以在屏幕上放置多少元素，从数组中提取我们实际可以看到的元素并销毁其余元素

  6. 循环返回的数组结果并将所有结果添加到单个字符串中。然后将包含我们可以看到的所有结果的字符串附加到 UL 中。

我的问题是这真的会给我带来性能提升吗？我相信我最初的问题是dom中的元素太多。

这也是常见的事情吗？或者有更好的方法吗？

谢谢

4

1 回答 1

2

移动设备上的缓慢性能似乎是由于 DOM 中的大量项目。我尝试了各种方法来加速 jsfiddle 上的代码（例如减少 jQuery DOM 请求的数量），但它仍然很慢http://jsfiddle.net/5LfMt/15/

我在您的原始问题中对建议进行了修改：http: //www.strudel.org.uk/test/stack.html它非常粗糙，没有任何错误检查，但表明基本想法有效并且更快。它可能还有助于页面渲染时间，因为浏览器最初不必渲染所有 500 张图像。

我假设您所有的图像都具有相同的已知高度。我创建了一个文件名数组，然后确定哪些是可见的。列表的顶部填充被更新，以确保我们留在文档中的正确位置。我附加了一个更新列表的滚动侦听器 - 删除列表项然后添加可见项。从 DOM 中删除它们的一个后果是覆盖层也被删除了，所以我创建了一个数组来记录覆盖层的状态。

于 2012-05-19T16:33:43.887 回答