我目前正在尝试使用新的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中测试时，它可以正常工作。这让我认为这是一个浏览器问题。
经过更深入的挖掘，我发现了我的情况的“问题”。对于许多其他人来说，可能是相同的问题。
事实证明，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%">
现在Firefox浏览器中存在一个错误：如果loading="lazy"属性位于src属性之后，则无效。
修复方法很简单：将loading属性放在src属性之前。
有效示例：
<img
loading="lazy"
src=...
/>
以下代码在Firefox中无法正常工作 - 图片将会立即加载（但在Chrome中可以正常工作）：
<img
src=...
loading="lazy"
/>
IntersectionObserver 自己来实现。const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const img = entry.target;
if (entry.intersectionRatio > 0) {
img.setAttribute("src", img.getAttribute("data-src"));
observer.unobserve(entry.target);
}
});
});
//Get images that aren't visible on load
const imgs = document.querySelectorAll("img").filter((img) => {
const { top, left, bottom, right } = img.getBoundingClientRect();
return (
top >= 0 &&
left >= 0 &&
bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
right <= (window.innerWidth || document.documentElement.clientWidth)
);
});
imgs.forEach((elm) => {
//Save src to data-src
elm.setAttribute("data-src", elm.getAttribute("src"));
//Set src to single invisible base64 pixel to minimize jank
elm.setAttribute(
"src",
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==",
);
//Observe the element when it scrolls into the viewport
observer.observe(elm);
});
请确保在页脚使用同步的脚本标签进行操作。如果您等待DOMContentLoaded或类似事件，可能会发生某些图像已经被请求的情况。例如：
<html>
<body>
Your body content, including images...
<script>
//PUT YOUR CODE HERE
</script>
</body>
</html>
注意脚本标签上没有任何属性。如果你的脚本标签有 defer 或 async 属性，或者是 type='module'，那么 JavaScript 不会在图片下载开始之前执行。
我已经在所有的图片上应用了loading="lazy"，为我的<img>标签包含了width="111px" height="111px"属性，甚至将它们转换成WebP格式以减小大小，但是我的Firefox浏览器仍然会加载整个页面的所有图片。我刷新后不会触摸或滚动。
指示器开发工具显示是懒惰图像。
我使用Nodejs、Vue和Tailwind。
可能出了什么问题？
这可能是由于缓存引起的。
如果在网络选项卡中看到lazy-img，那么一切都正常。
如果您想要进行双重检查，可以在私人窗口上进行测试。
图片应该以"relative"的样式定位。