javascript - 如何在包含大量图像的网页上实现平滑滚动？

Question

我的一个页面上包含了很多图像，Pinterest 将是最好的比较它，我注意到滚动尤其是在 Chrome 中非常生涩且不流畅。有没有办法实现更流畅的滚动？我会通过 JavaScript 做到这一点还是它是一个 CSS 属性？

Answer 1

在 Pinterest 上滚动流畅的原因有以下几点：

1. 图像被延迟加载。它们也可能被缓存在服务器端以加快服务速度。
2. 如果图像距离视口足够远，则图像将被清除（如果您的 THRESHOLD 像素向下，则应清除 y=0 处的图像）。这会清理内存并提供更流畅的体验（这类似于UITableViewController在 iOS 中的工作方式）。

我的建议？

1. 在您的服务器上缓存图像。
2. 清除远离观察口的 THRESHOLD 像素的图像。
3. 延迟加载图像。
4. 使用一个好的无限滚动插件。

PS - 如果您提供非常大的文件（按大小），您将获得缓慢的体验（取决于您的互联网连接速度）。

Answer 2

id' 建议使用 js 将所有图片加载到浏览器的可见区域，再加载一些图片，如果用户向下滚动，则加载更多图片。当从一开始就有很多图片时，滚动变得非常糟糕。