Chrome浏览器图片懒加载异常：批量图片全下载后才显示的解决咨询

我们使用HTML原生loading="lazy"属性结合<picture>实现图片懒加载，示例代码如下：

<picture>
  <source type="image/webp" srcset="example.webp">
  <img loading="lazy" src="example.jpg" alt="" title="" fetchpriority="auto">
</picture>

但在Chrome及其他Chromium内核浏览器中，多张此类懒加载图片会等待全部下载完成后才统一显示，而Firefox中图片下载完成后会立即渲染。要让Chromium内核浏览器也实现「下载即显示」的行为，可尝试以下几种方案：

方案1：添加decoding="async"属性 #

给<img>标签添加decoding="async"属性，告知浏览器异步解码图片，避免图片解码阻塞页面渲染，让单张图片下载完成后即可快速显示：

<picture>
  <source type="image/webp" srcset="example.webp">
  <img loading="lazy" src="example.jpg" alt="" title="" fetchpriority="auto" decoding="async">
</picture>

方案2：调整fetchpriority属性值 #

将fetchpriority="auto"改为fetchpriority="low"，降低懒加载图片的资源获取优先级，让浏览器不会批量调度这些图片的下载与渲染，而是按实际加载进度逐个处理：

<picture>
  <source type="image/webp" srcset="example.webp">
  <img loading="lazy" src="example.jpg" alt="" title="" fetchpriority="low">
</picture>

方案3：自定义JS懒加载逻辑 #

放弃原生loading="lazy"，通过JavaScript手动监听滚动事件，判断图片是否进入视口，再动态设置图片资源，完全控制加载与渲染时机：

// 获取所有需要懒加载的图片容器
const lazyPictures = document.querySelectorAll('picture[data-lazy]');

// 使用IntersectionObserver监听元素可见性
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const picture = entry.target;
      const img = picture.querySelector('img');
      const source = picture.querySelector('source');
      
      // 动态设置资源地址
      source.srcset = picture.dataset.srcsetWebp;
      img.src = picture.dataset.src;
      
      // 图片开始加载后移除监听
      observer.unobserve(picture);
    }
  });
});

// 初始化监听所有目标容器
lazyPictures.forEach(pic => observer.observe(pic));

对应的HTML结构调整为：

<picture data-lazy data-srcset-webp="example.webp" data-src="example.jpg">
  <source type="image/webp">
  <img alt="" title="" decoding="async">
</picture>

这种方式完全由代码控制加载时机，能确保图片下载完成后立即渲染，不受浏览器原生懒加载策略的影响。

内容的提问来源于stack exchange，提问作者Mr Alihoseiny