0

我目前正在构建一个使用 jQuery 为滚动设置动画的单页网站。我有一个使用 jQuery Ajax 嵌入的 Tumblr 博客。当博客加载了所有图像时，它会滞后于滚动动画。

作为一种帮助方法，我不会加载博客，直到 scrollTop 处于某个范围或博客内，即使这样也只会在用户没有滚动至少半秒时加载（以在滚动过去时停止触发元素）

但是，就像我说的那样，一旦加载图像，就会导致滚动滞后。当不在视图中时隐藏图像（它们已经加载）并且仅在用户没有滚动经过它们时才显示它们的最佳方法是什么？这样当滚动动画直接经过它们时它们会保持隐藏状态？

4

2 回答 2

2

你可以简单地使用jQuery("#your-image").hide();

但是您可能遇到的问题是浏览器缓存泄漏。因此，您可以做的是从 DOM 中删除图像，但是您必须在用户每次滚动到时重新加载它们，您将获得巨大的数据传输。所以我建议简单地使用hide()jQuery 中的函数，但这并不能解决缓存问题。

启动 Google Chrome 并使用提供的开发人员工具是一件好事。只需按下f12键盘并查看Timeline. 在顶部（左侧）的第三个选项卡中，您可以选择memory，这非常高吗？像这样的网站的一个很大的危险是内存溢出。这意味着 JavaScript 垃圾收集器无法删除所有unused对象。所以确保你做对了。

编辑：我在 Smashing Magazine 的 Facebook 页面上发现了这篇文章，您可能会发现它很有趣。

于 2012-12-16T21:19:45.673 回答
0

也许您可以使用低分辨率或更小的缩放图像来替换当前不可见的图像。然后，一旦 scrollTop 使它们可见，您就可以重新加载这些图像的高分辨率版本。理想情况下，用户应该缓存这两个版本，这样他只能看到半秒钟的低分辨率图像。

于 2012-12-16T21:35:57.647 回答