图片懒加载在移动端白屏怎么办？

南宫奕卓提问于 2026-03-27 18:22:19 阅读 2

优化

我用 IntersectionObserver 做了图片懒加载，PC 上没问题，但一到手机上就先白屏好一会儿才加载出来，体验很差。是不是我写法有问题？

我的代码是这样写的：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

难道要加个 loading 占位图？还是得配合 CSS 设置默认高度？现在图片没加载前容器高度是 0，会不会是这个原因？

我来解答赞 2 收藏

反馈

1 条解答

南宫新艳 Lv1

首先你要明白为啥会出现白屏，主要是因为图片还没加载时容器高度为0，导致布局塌陷。你有几种选择来解决这个问题。

一个简单有效的方法是给图片设置固定的高度或最小高度，这样即使图片没加载出来，页面也不会出现明显的跳动。比如说在CSS里加上这样的样式：

img {

  min-height: 200px; /* 根据实际情况调整 */

  display: block;

}

然后关于占位图的问题，确实是个好主意。你可以直接用base64编码的小图标作为默认背景，或者用纯色填充。这需要改下你的HTML结构：

<img data-src="real-image.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-color:#f0f0f0">

这里我用了透明的1x1像素gif作为占位符，同时加了背景色。

再看看你的代码逻辑基本没问题，不过可以优化一下性能。比如可以设置个阈值，让图片提前一点加载，用户体验会更好：

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

  entries.forEach(entry => {

    if (entry.isIntersecting) { // 当元素进入视口

      const img = entry.target;

      img.src = img.dataset.src; // 开始加载真实图片

      observer.unobserve(img); // 停止观察这个元素

    }

  });

}, {

  threshold: 0.1 // 提前10%就开始加载

});

这样处理后，移动端体验应该会改善很多。开发这种细节问题真的挺烦人的，但这也是我们程序员必须面对的现实啊。

2026-03-27 19:01