WebP图片懒加载时，为什么部分图片显示成空白？

这个问题其实是WebP兼容性检测和懒加载时机共同导致的，你遇到的情况我之前也踩过坑。核心问题不在Intersection Observer本身，而在于你怎么处理浏览器对WebP的支持判断以及资源切换的时机。

首先得明确一点：Firefox虽然支持WebP，但它的缓存策略和图像解码机制跟Chrome不一样，尤其在懒加载场景下，如果图片格式切换不干净，很容易出现“看似加载完成但渲染空白”的情况。另外你提到用了srcset加data-srcset的方式，这种手动管理方式很容易出问题，特别是当浏览器已经预加载了某个占位图，后续再改写时可能不会重新触发解码。

具体来说，解决方案分三步走：

第一步，放弃用data-srcset自己拼接的做法，改用picture标签做原生格式回退，这是最可靠的方式。很多人以为picture会导致404，其实是因为没正确设置source的media条件或者路径错了。正确的做法是让浏览器自己选择支持的格式，而不是靠JS去猜。

<!-- 懒加载用这个结构 -->

<picture>

  <!-- 浏览器自动选支持的格式，优先WebP -->

  <source srcset="image.webp, image@2x.webp 2x" type="image/webp">

  <!-- 回退到JPG -->

  <source srcset="image.jpg, image@2x.jpg 2x" type="image/jpeg">

  <!-- 最终回退，同时保留占位和懒加载属性 -->

  <img src="placeholder.jpg" 

       alt="描述" 

       loading="lazy" 

       class="lazyload">

</picture>

这样写的好处是，浏览器会根据source的type依次尝试，只加载它能支持的那个源，避免无效请求。而且现代浏览器对picture内部的懒加载处理更稳定，包括Firefox。

第二步，Intersection Observer里不要直接修改srcset，而是控制整个picture是否激活。很多开发者犯的错误是在observer回调里手动给img打补丁式地加srcset，这会破坏浏览器原有的资源协商流程。

你应该这么做：

const observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const picture = entry.target;

      // 找到内部的img元素

      const img = picture.querySelector('img');

      // 触发实际加载：把data-srcset迁移到真正的srcset上

      // 注意：这里不需要动source，因为HTML里已经写好了

      if (img.dataset.srcset) {

        img.srcset = img.dataset.srcset;

        delete img.dataset.srcset;

      }

      // 可选：移除loading属性，防止二次干预

      img.removeAttribute('loading');

      // 停止监听这个元素

      observer.unobserve(picture);

    }

  });

});



// 所有带.lazyload的容器都监听

document.querySelectorAll('picture.lazyload').forEach(pic => {

  observer.observe(pic);

});

注意关键点：你在HTML里仍然可以用data-srcset来延迟加载，但在observer触发时才把它赋值给真正的srcset。这样既实现了懒加载，又不干扰浏览器的格式协商流程。

第三步，确保服务器真的返回了正确的MIME类型。你说配了image/webp，但建议用curl验证一下：

curl -I https://yoursite.com/image.webp

看响应头有没有 Content-Type: image/webp。有时候Nginx/Apache配置了但location块没生效，或者CDN缓存了旧的MIME类型。Firefox对MIME类型比Chrome严格得多，错一个字母都不行。

还有一个隐藏坑点：如果你用了Service Worker做缓存，记得检查fetch事件里是否正确转发了请求，别把WebP响应体缓存成blob但忘了设content-type。

最后提一句，你之前说用picture报404，大概率是source里的路径写错了。比如漏了路径前缀，或者用了相对路径但在不同页面层级下引用。建议统一用绝对路径或根相对路径（/assets/img/...）。

总结一下：别用JS模拟格式切换，让浏览器用picture原生处理；懒加载只控制加载时机，不干预格式决策；保证MIME和路径100%正确。这套组合拳下来，Firefox也能稳稳显示。