我正在开发一个销售手工艺品的网站，因此用户希望每件产品都有高质量的图像。由于与 SEO 相关的问题，我考虑异步加载图像，并且仅在用户到达每个产品缩略图时加载。我不知道如何发现当每个用户在滚动页面时到达每个产品缩略图以加载主图像和高质量图像它; javascript中是否有任何事件可以检测到？或者我必须按像素或类似的方式计算？
【问题讨论】：
标签： javascript ajax asynchronous events infinite-scroll
您正在寻找的是所谓的“延迟加载”。延迟加载意味着只在用户真正需要时才加载所需的资源。在此示例中，用户仅在图像实际出现在视口中（屏幕上可见的元素）后才需要图像
对于基于 Chromium 的浏览器和 Firefox，最简单的方法是使用 img-tag 的“loading”属性并将值设置为“lazy”。示例：img loading=lazy src="link"
这适用于大多数情况。但是，如果您想控制其背后的功能，您正在搜索的东西称为“交叉口观察器”。有了这个，你可以做很多与元素和视口相关的事情。例如。元素离视口有多远，或者元素实际在视口中的百分比。
如果你想要一个 15 分钟的短视频来解释 Intersection Observer 的基础，我可以推荐这个 YouTube 视频：
https://www.youtube.com/watch?v=2IbRtjez6ag
我希望这足以帮助您解决问题！
【讨论】：