加载图像时缓慢滚动

Question

我有一个图像管理器，显示固定尺寸的图像网格。缩略图已经相对较小，所以我真的不能使它们更小。我实现了懒惰的加载，并使用debounce函数检查了可见区域中的图像是否。这提高了启动我的图像经理的速度。但是，如果我在加载新的图像时滚动，则滚动会变得非常慢。无论如何是否存在或进一步优化加载图像？

编辑：

有没有办法在进入新的图像时防止滚动？当我们尝试滚动以查看更多评论时，YouTube只是如何不断弹跳？

Answer 1

尽量不要一次加载所有图像（我想您已通过懒惰加载实现），我知道在线用户在线倾向于快速滚动。<<<<<<<<<<<</p>

我建议，这里几乎没有什么：首先

1. 以正确的方式实施懒惰加载至关重要。这是一些最佳技术的列表，请确保哪种最适合您。
2. 您已经提到过，缩略图相对较小，但是我认为只有指定较小的维度还不够两个文件夹一个用于实际映像，另一个文件夹在您的托管服务器上
3. 即使我们非常谨慎，用户也可以在我们的服务器上上传大量的重量图像，如果是这种情况，您需要在客户端端上调整图像大小，然后在服务器上上传，在实际图像中进行一个副本，另一个用于缩略图
4. 如果您在谈论产品图像，请保留PNG，为什么，因为它们比BMP和JPG要好得多。您也可以使用https://tinypng.com/等在线工具或https://pngquant.org/
等软件来压缩它们。

希望这有助于解决您的问题，因为它可以解决我的问题。

- n baua

Answer 2

事实证明，慢速滚动是由于我呼吁getBoundingClientRect（）查找新的可见图像，而仍有一些图像仍在加载。这导致了一个流动，使一切都陷入了困境。

我将其更改为批量加载图像，以便在加载图像时未调用getBoundingClientRect（）。