本机加载延迟导致某些图像无法加载

如何解决本机加载延迟导致某些图像无法加载

我有这个代码（减少了重现的最小值）：

<div style="overflow:hidden;height:160px;width:160px;border:4px solid red;position:relative;">
  <img src="https://josefkorda.cz/img/sluzby-koncerty.jpg" loading="lazy" style="height:100%;position:absolute;top:0;left:-1px;">
</div>

图像（红色边框）是用 loading="lazy" 本地延迟加载的。

问题是在我更改 css 中的某些 DevTools 或删除代码中的 loading="lazy" 属性之前，不会加载图像。

它开始工作，如果：

• left:0 用于图像或
• overflow:hidden 被删除或
• loading="lazy" 已删除

这是 live example 的链接（更新：通过提供图像的尺寸，问题在示例中不再可见）

这是示例图像，其中第一个带有图像的圆圈是它的外观以及它在没有 loading="lazy" 的情况下的工作方式。下一个圆圈（图像）是在 loading="lazy" 标记中带有 img 属性的有问题的圆圈。