本机延迟加载（loading=lazy）即使启用标志也无法正常工作

问题描述 投票：0回答：9

我目前正在尝试使用新的 loading="lazy" 属性更新我的网站，如下所示：https://web.dev/native-lazy-loading

如视频中所见，一切都按预期工作，但与我在 chrome 中的瀑布图相比，它并没有。

外观： chrome developer tools

它应该是什么样子：

chrome developer tools

这是它的实现方式：

<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">
html image google-chrome lazy-loading
9个回答
40
投票

我在尝试实施时遇到了类似的问题。

我默认使用 Chrome，但它无法正常工作。当我在 Firefox 中测试它时，它确实有效。这让我认为这是一个浏览器问题。

在深入挖掘之后，我发现了我的案例的“问题”。对于许多其他人来说可能是一样的。

事实证明Chrome在加载标记为懒惰的图像时比Firefox更不耐烦。这意味着它加载图像的时间要早得多，因此当图像出现在屏幕上时不会加载图像，但会比这更早。 另一方面，Firefox 几乎在图像即将显示在屏幕上时加载图像。

我正在测试的图像在首屏下方，但页面不是很长，所以 Chrome 无论如何都会加载图像。

当我在一篇更长的文章中尝试时，文章深处的图像也确实在 Chrome 中延迟加载。

希望这有帮助！

19
投票

我有类似的问题，经过一番研究，我找到了解决方案：

只需要在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 文章中找到更多信息

希望有帮助👍

2
投票

我有一个最糟糕的原因它不起作用——我忘记添加

width
和
height
属性（它们在我的损坏代码中被添加为
style
）

1
投票

如果你不想改变你的图像大小，可以选择使用这个

原码

<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%">
0
投票

一个可能的修复方法是在文档的页脚处使用 

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);
});

确保在页脚中使用 SYNCHRONOUS 脚本标记执行此操作。如果您等待 

DOMContentLoaded
或类似的，一些图像已经被请求。例如

<html>
<body>
  Your body content, including images...
  <script>
     //PUT YOUR CODE HERE
  </script>
  </body>
</html>

注意脚本中没有属性。如果您的脚本标签上有 

defer
或 
async
属性或者是 
type='module'
则在图像下载已经开始之前，javascript 不会执行。

0
投票

我已将 

loading="lazy"
应用于我的所有图像，包括我的 
width="111px" height="111px"
标签的 
<img>
属性，甚至将它们转换为 WebP 格式以减小大小，但我的 Firefox 浏览器仍然从整个页面加载所有图像。刷新后我不触摸或滚动。 指标开发工具说它是 - lazy-img.

我使用Nodejs、vue和tailwind。

有什么问题吗？

0
投票

可能是因为cache.

如果您在“网络”选项卡中看到此处lazy-img，则表示一切正常。

如果您只想仔细检查，可以在私人窗口上进行测试。

0
投票

Firefox目前有一个bug：

loading="lazy"
属性没有作用，如果放在
src
属性之后。

修复很简单：将 

loading
属性放在 
src
属性 之前。

工作示例：

<img
  loading="lazy"
  src=...
/>

以下内容在 Firefox 中不起作用 - 图像将立即加载（但在 Chrome 中有效）：

<img
  src=...
  loading="lazy"
/>
-5
投票

图片在风格上要定位为“相对”

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.