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

Code°春莉提问于 2026-02-16 15:26:25 阅读 15

优化

我用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));

我来解答赞 4 收藏

反馈

1 条解答

欧阳美丽 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 这种坑人的样式。

总之按上面的方法试一下，应该能解决问题。如果还有问题，可能是插件冲突或者其他隐藏的坑，再具体分析吧。

2026-02-16 15:30