本机延迟加载 (loading=lazy) 即使启用了标志也无法正常工作
Native lazy-loading (loading=lazy) not working even with flags enabled
我目前正在尝试使用新的 loading="lazy" 属性更新我的网站，如下所示：https://web.dev/native-lazy-loading
正如视频中所见，一切都按预期工作，但与我在 chrome 中的瀑布图相比，它并没有。
外观：
它应该是什么样子：
这是它的实现方式：
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">
我在尝试实施时遇到了类似的问题。
我默认使用 Chrome，但它不起作用。当我在 Firefox 中测试它时，它确实有效。这让我认为这是一个浏览器问题。
在进一步挖掘之后，我找到了适合我的案例的 "problem"。对于许多其他人来说可能是一样的。
事实证明 Chrome 在加载标记为懒惰的图像时比 Firefox 更不耐烦。这意味着它加载图像的时间要早得多，因此当图像出现在屏幕上时不会加载图像，但会比这更早。
另一方面，Firefox 几乎在图像即将显示在屏幕上时加载图像。
我正在测试的图片在首屏下方，但页面不是很长，所以 Chrome 无论如何都会加载图片。
当我在一篇更长的文章中尝试使用它时，文章深处的图像确实也在 Chrome 中延迟加载。
希望对您有所帮助！
我有一个最糟糕的原因它没有工作 - 我忘记添加 width 和 height 属性（它们在我损坏的代码中被添加为 styles）
我遇到了类似的问题，经过一番研究，我找到了解决方案：
只需要在IMG标签中加上width和height，这是因为浏览器在应用延迟加载之前需要知道元素的大小
您的代码：
<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 article
的更多信息
希望对您有所帮助
图像的样式应定位为“相对”。
我目前正在尝试使用新的 loading="lazy" 属性更新我的网站，如下所示：https://web.dev/native-lazy-loading
正如视频中所见，一切都按预期工作，但与我在 chrome 中的瀑布图相比，它并没有。
外观：
它应该是什么样子：
这是它的实现方式：
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">
我在尝试实施时遇到了类似的问题。
我默认使用 Chrome，但它不起作用。当我在 Firefox 中测试它时，它确实有效。这让我认为这是一个浏览器问题。
在进一步挖掘之后，我找到了适合我的案例的 "problem"。对于许多其他人来说可能是一样的。
事实证明 Chrome 在加载标记为懒惰的图像时比 Firefox 更不耐烦。这意味着它加载图像的时间要早得多，因此当图像出现在屏幕上时不会加载图像，但会比这更早。 另一方面，Firefox 几乎在图像即将显示在屏幕上时加载图像。
我正在测试的图片在首屏下方，但页面不是很长，所以 Chrome 无论如何都会加载图片。
当我在一篇更长的文章中尝试使用它时，文章深处的图像确实也在 Chrome 中延迟加载。
希望对您有所帮助！
我有一个最糟糕的原因它没有工作 - 我忘记添加 width 和 height 属性（它们在我损坏的代码中被添加为 styles）
我遇到了类似的问题，经过一番研究，我找到了解决方案：
只需要在IMG标签中加上width和height，这是因为浏览器在应用延迟加载之前需要知道元素的大小
您的代码：
<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 article
的更多信息希望对您有所帮助
图像的样式应定位为“相对”。