网络浏览器如何发现用户何时到达网页中的自定义图像？
我正在开发一个销售手工工艺品的网站，因此用户期望每个产品都有高质量的图像。由于 SEO 相关问题，我考虑异步加载图像，并且在用户到达每个产品缩略图时加载图像。我不知道如何找出当每个用户在滚动页面加载主图像和高质量图像时到达每个产品缩略图时它; javascript 中是否有任何事件可以检测到这一点？或者我必须按像素或类似的方式计算？
I am developing a web site for selling handy crafts so users expect high quality images for per product. because of SEO related problems, I think about loading image asynchronous and just when user reach to per product thumbnail.I don't know how find out that when each user reach to per prouct thumbnail when scrolling page to load main and hight quality image for it; are there any event in javascript for detect that? or I have to calculate by pixels or some way like that?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您正在寻找的称为“延迟加载”。延迟加载是指只有在用户真正需要时才加载所需的资源。在此示例中，用户仅在图像实际位于视口（屏幕上可见的元素）中时才需要图像。
对于基于 Chromium 的浏览器和 Firefox，最简单的方法是使用 img 标签的“loading”属性和设置值为“懒惰”。示例： img loading=lazy src="link"
这适用于大多数情况。但是，如果您想控制其背后的功能，您正在寻找的称为“交叉口观察者”。有了这个，你可以做很多与元素和视口相关的事情。例如，元素距视口有多远，或者元素实际在视口中的百分比是多少。
如果您想要一个非常短的 15 分钟视频来解释 Intersection Observer 的基础，我可以推荐这个 YouTube 视频：
https://www.youtube.com/watch?v=2IbRtjez6ag
我希望这足以帮助您解决问题！
What you are looking for is called "lazy loading". Lazy Loading means that the required resources are only loaded once the user actually needs it. In this example, the user only needs the image once the image is actually in the viewport (the elements visible on the screen)
The easiest way for Chromium-based browsers and Firefox is using the "loading" attribute of the img-tag and setting the value to "lazy". Example: img loading=lazy src="link"
This will work for most cases. However, if you want to be in control of the functionality behind it what you are searching for is called a "Intersection Observer". With this you can do alot of stuff related to elements and the viewport. E.g. how far is an element away from the viewport, or how much percent of the element is actually in the viewport.
If you want a really short 15 minute video that explains the Intersection Observer basis I can recommend this YouTube video:
https://www.youtube.com/watch?v=2IbRtjez6ag
I hope that this will be enough to help you with your problem!