我正在开发一个销售方便工艺品的网站，这样用户就可以期待每件产品都能获得高质量的图像。由于SEO相关的问题，我考虑异步加载图像，并且只在用户到达每个产品的缩略图时加载。我不知道如何发现，当每个用户在滚动页面加载主图像和高质量图像时，都会达到每个缩略图；javascript中是否有用于检测的事件？或者我必须用像素或类似的方法来计算？
您要查找的内容称为"懒惰加载"；。懒惰加载意味着只在用户实际需要时才加载所需的资源。在本例中，用户只在图像实际位于视口(屏幕上可见的元素(时才需要图像
对于基于Chromium的浏览器和Firefox来说，最简单的方法是使用"；加载"；属性，并将该值设置为"；懒惰"；。示例：img loading=lazy-src="链接"；
这适用于大多数情况。然而，如果你想控制它背后的功能，你正在搜索的被称为"；交叉点观察者"；。有了这个，你可以做很多与元素和视口相关的事情。例如，元素离视口有多远，或者元素实际在视口中的百分比是多少。
如果你想要一个15分钟的短片来解释交叉口观察员的基础，我可以推荐这个YouTube视频：
https://www.youtube.com/watch?v=2IbRtjez6ag
我希望这将足以帮助你解决你的问题！