我试图了解相对较新的img属性"loading"。
我知道，如果img的属性loading="lazy"，那么它会告诉支持该属性的浏览器，它可以在接近视口时加载。
那么，为什么不总是将loading设置为"lazy"呢？那些立即出现在屏幕上的图像无论如何都会被渲染，因为它们已经在视口中了。所以基本上loading="lazy"在这种情况下是被忽略的。
我也在这个演示中看到https://mathiasbynens.be/demo/img-loading-lazydom顶部的图片设置了loading="lazy"属性。
我从以下位置获得了上面的链接：https://web.dev/native-lazy-loading/
提前感谢：(
应避免为第一个可见视口中的任何图像设置loading=lazy。
来源：https://web.dev/browser-level-image-lazy-loading/#avoid-延迟加载第一个可见视口中的图像
简而言之，如果图像没有延迟加载，浏览器可以立即开始获取资源。惰性图像需要等到浏览器渲染管道的"布局"阶段，才能确定图像是否在视口中。
不必要地添加loading=lazy可能会增加少量延迟，直到您的网页完全呈现。
我能想到的不总是使用延迟加载的原因之一是网络可能会中断。在这种情况下，您希望在连接处于活动状态时尽可能多地下载，以便在连接断开时可以使用页面的大部分内容。
这是对浏览器的一个提示，即图像可能不会立即有用/可见，并且应该优先考虑其他资源。图像转盘中的第三个图像或出现在页面下方的图像是该属性有用的一些很好的例子。
过于懒惰的实现，比如Firefox，在滚动到视图中之前不会显示图像。这导致浏览器在加载图像时显示白色区域。这不是一个理想的用户体验。另一方面，Chrome会在图像出现在屏幕上之前加载3000-8000px的图像，这让人太渴望了。
Chrome不会加载延迟加载的图像，即使它们在背景打开选项卡的视口中也是如此。这是由Chromium的IntersectionObserver的限制引起的，可能会在未来的版本中得到修复。