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

Question

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

Answer 1

在Pinterest上滚动的原因是顺利的原因是：

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

我的建议？

1. 在您的服务器上缓存图片。
2. 清除远离观看端口的THRESHOLD像素的图像。
3. 延迟加载图片。
4. Use a good infinite scroll plugin.

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

Answer 2

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