我在尝试实现它时遇到了类似的问题。
我默认使用Chrome，它不能用。当我在Firefox中测试时，它确实能用。这让我认为是浏览器的问题。
在深入研究了一点之后，我发现了我的案例的“问题”。它可能对其他许多人来说也是一样的。
事实证明，**Chrome在加载标记为“懒惰”的图片时比Firefox更不耐烦。这意味着它加载图片的时间要早得多，所以图片不会在屏幕上出现时就被加载，而是在更早的时候。而Firefox几乎在图片即将出现在屏幕上时就加载了图片。
我测试的图像在折叠下面，但是页面不是很长，所以Chrome无论如何都在加载图像。
当我在一篇更长的文章中尝试它时，文章深处的图像也在Chrome中缓慢加载。
希望这对你有帮助！

我也遇到过类似的问题，经过一番研究，我找到了解决办法：
只需要在IMG标签中添加宽度和高度，这是因为浏览器需要在应用延迟加载之前知道元素的大小。
您的代码：

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">

添加宽度和高度后的代码：

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">

另一种方法是使用内联样式：

<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">

考虑到我只是随机将IMG标签的尺寸设置为200px。web.dev
希望能有所帮助👍

我有一个最糟糕的原因--我忘了添加width和height属性（它们在我的坏代码中被添加为style）

如果您不想更改图像大小，可以选择使用此
原始代码

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">

工作惰性负载，无大小限制

<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="auto" height="100%">

图像在样式中应定位为“相对”。