仅使用 HTML 的 Wordpress 延迟加载 - 加载比应有的更多图像

Question

我从来没有使用我的代码编辑器进行延迟加载的问题，它通常只在我滚动时加载下一张图像。这次我需要在不使用插件的情况下在 WordPress 中完成。所以我刚刚在我的

loading="lazy

标签中添加了

<img>

。但是，当我在网络工具中测试延迟加载时，当屏幕上只显示 1 张半图像时，它加载了 4 张图像。更小的屏幕更糟糕，当视点中只有 3 张图像时它加载了 8 张图像。我怎样才能让它只加载下面的图片？

我尝试在图像底部添加

margin

，它从加载6张减少到加载大屏幕的4张图像。然而，如果图像之间的差距很大，它看起来不太好。

Answer 1

浏览器加载图片时，除非明确指定，否则不会立即识别图片的大小。为了让浏览器在页面上为图片预留足够的空间，建议所有

<img>

标签都包含

width

和

height

属性。如果不包括尺寸，可能会发生布局偏移，这在加载时间较长的页面上更为明显。

在大多数情况下，即使没有指定图像尺寸，延迟图像加载也会适用，但有一些非标准情况您应该注意。如果没有指定

width

和

height

，图像尺寸最初为 0×0 像素。如果您有这样的图像库，浏览器可能会决定它们最初都适合查看区域，因为它们几乎不占用空间并且不会被推出屏幕。在这种情况下，浏览器确定它们对用户都是可见的，并决定加载图像。