加载图像时滚动缓慢答案

【问题标题】：Slow scrolling when images load加载图像时滚动缓慢
【发布时间】：2017-12-21 03:50:54
【问题描述】：

我有一个图像管理器，它显示固定大小的图像网格。缩略图已经相对较小，因此我无法将它们缩小。我实现了延迟加载并使用去抖动功能来检查图像是否在可见区域中。这提高了启动我的图像管理器的速度。但是，如果我在加载新一批图像时滚动，滚动会变得非常慢。是否有解决此问题或进一步优化加载图像的方法？

编辑：

有没有办法在新一批图像进入时防止滚动？有点像当我们尝试滚动查看更多仍在加载的 cmets 时 Youtube 会一直弹跳？

【问题讨论】：

【解决方案1】：

尽量不要一次加载所有的图片（我猜你已经用延迟加载实现了），我知道在线用户很容易快速滚动。

我建议，这里有几件事：首先

以正确的方式实现延迟加载至关重要。 here is a list of few best techniques, make sure which works best for you。
您已经提到，缩略图相对较小，但是我认为仅指定较小的尺寸是不够的，我希望您已经涵盖了这一点，否则请维护两个文件夹，一个用于实际图像，另一个用于您托管服务器上的缩略图。
尽管我们非常小心，但用户在我们的服务器上上传了大量的大图，如果是这种情况，您需要在客户端调整图像大小，然后上传到服务器，一份实际图像 和另一个用于 缩略图
如果您在谈论产品图片，请保留 PNG，为什么，因为它们比 BMP 和 JPG 要好得多。您也可以使用https://tinypng.com/ 等在线工具或https://pngquant.org/ 等软件进行压缩

希望这有助于解决您的问题，因为它确实解决了我的问题。

--N Baua

【讨论】：

非常感谢！！我几乎已经有 2-3 分了。我正在审查我的延迟加载实现，以确保它不在我的代码中。但我确保不要调用 getBoundingClientRect ，除非我真的需要。我尝试使用 angular-lazy-img.js 库，它似乎也被卷轴所困扰。

【解决方案2】：

原来滚动缓慢是由于我调用 getBoundingClientRect() 来查找新的可见图像，而仍有一些图像正在加载。这导致了回流，使一切陷入困境。

我将它改为批量加载图像，以便在加载图像时不会调用 getBoundingClientRect()。

【讨论】：