元素
元素
工具
博客
问答

图片懒加载时为什么部分图片加载后还是空白？

Code°春莉 阅读 58
优化

我用Intersection Observer给图片做了懒加载，把src替换成srcset后，滚动到可视区确实触发了加载，但有几张图片显示空白。我检查了网络请求都返回200了，路径也没问题。

尝试过把图片直接放在页面里能正常显示，但用懒加载就出问题。这是什么情况啊？代码大概是这样的：


const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;  // 这里替换了src
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
我来解答 赞 11 收藏
二维码
手机扫码查看
反馈
2 条解答
Mr-树森
Mr-树森 Lv1
我碰到过类似的问题，最后发现是图片的 srcset 属性没设置好导致的。你代码里只替换了 src，但如果图片本身是用 srcset 来指定不同分辨率的图片源，只改 src 是不够的。

浏览器会优先用 srcset 加载图片，如果 srcset 里没有正确设置或者格式不对（比如路径写死了、少了逗号后面的描述符），那就算 src 有效，图片也可能不显示。

你检查下 HTML 里这些懒加载的 img 标签是不是长这样：

<img class="lazy" data-src="xxx.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />


或者更常见的是：

<img class="lazy" data-srcset="xxx-1x.jpg 1x, xxx-2x.jpg 2x" src="..." />


如果是这种情况，你 JS 里不仅要处理 src，还得处理 srcset：

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

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      if (img.dataset.src) {

        img.src = img.dataset.src;

      }

      if (img.dataset.srcset) {

        img.srcset = img.dataset.srcset;

      }

      observer.unobserve(img);

    }

  });

});

document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));


另外，如果图片本身是 SVG 或者用了 loading="lazy" 属性，也可能和 IntersectionObserver 冲突，不过这种情况少一些。

你先试试这个，希望能帮到你～
点赞 3
2026-02-25 18:08
欧阳美丽
欧阳美丽 Lv1
你这问题其实挺常见的，主要原因是图片加载的时机和浏览器渲染机制之间的冲突。懒加载时，虽然你把 src 替换成了 data-src 的值，但有些图片可能因为没有正确触发重新渲染而导致空白。

解决方法有几个方向可以试试：

第一种方法是强制让浏览器重新绘制图片。在替换 src 后，手动调用一下图片的 load 事件。比如这样改你的代码：

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

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      img.onload = () => img.classList.add('loaded'); // 确保加载完成

      observer.unobserve(img);

    }

  });

});

document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));


第二种方法更简单粗暴，直接给图片加个 ?v=随机数 来避免缓存问题。像这样：

img.src = img.dataset.src + '?v=' + Math.random();


第三种方法是从 WordPress 的角度入手，确保图片路径和属性都正确。如果你用的是 WordPress 自带的 wp_get_attachment_image 或者 the_post_thumbnail，可以通过钩子函数 wp_get_attachment_image_attributes 来调整输出的图片属性。比如：

add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {

  $attr['data-src'] = $attr['src'];

  $attr['src'] = ''; // 初始为空

  $attr['class'] .= ' lazy';

  return $attr;

}, 10, 3);


另外，记得检查一下你的图片是否有透明度或者特殊格式（比如 WebP），某些老旧浏览器对这些支持不太好，也可能导致空白。

最后，别忘了调试的时候打开开发者工具看看是不是 CSS 的问题，比如 display: none 或者 visibility: hidden 这种坑人的样式。

总之按上面的方法试一下，应该能解决问题。如果还有问题，可能是插件冲突或者其他隐藏的坑，再具体分析吧。
点赞 7
2026-02-16 15:30
相关推荐
元素
元素
工具
博客
问答
登录/注册