首屏延迟加载的图像会发生什么？

Question

有人可以解释一下，如果所有图像（甚至是首屏图像）都具有属性

loading="lazy"

，会发生什么？

浏览器是否有任何逻辑来决定不延迟加载立即可见的图像？或者事实上甚至是首屏图像延迟加载，导致布局变化？

Answer 1

如果图像作为属性

loading="lazy"

告诉浏览器仅在图像位于视口中时加载图像。

浏览器是否有任何逻辑来决定不延迟加载立即可见的图像？

当浏览器第一次开始加载页面时，它不知道视口中有什么，没有什么。要知道它必须对页面进行布局，这需要 CSS 和任何阻塞渲染的 JavaScript。

因此，对视口内图像使用

loading="lazy"

最直接的影响是您延迟开始下载图像，直到它布置在页面上。这听起来可能没有太大延迟，但对 LCP 等指标有显着影响。 因此，您应该只将

loading="lazy"

应用于您

知道

将在屏幕外的图像。

或者实际上是在首屏图像延迟加载，导致布局变化？

您不应依赖图像加载来避免布局变化。无论是否延迟加载，它们都可能导致布局变化，因为您无法保证在将其他内容绘制到屏幕上之前下载图像。相反，您应该

告诉浏览器图像尺寸是

，以便它可以在下载之前保留空间。