javascript - 如何在图片较多的网页上实现平滑滚动？

Question

我的一个页面上有很多图片，Pinterest 是最好的比较对象，我注意到滚动特别是在 Chrome 中真的很不稳定而且不流畅。有没有办法实现更流畅的滚动？我会通过 JavaScript 执行此操作还是它是 CSS 属性？

Answer 1

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

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

我的建议？

1. 在您的服务器上缓存图片。
2. 清除距离视口(viewport) THRESHOLD 像素的图像。
3. 延迟加载图片。
4. > Use a good infinite scroll plugin.

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