图片懒加载后为什么还是卡顿？

小倩提问于 2026-02-18 18:03:26 阅读 10

优化

我在项目里用Intersection Observer做了图片懒加载，但页面滚动时还是卡顿，尝试过把换成标签并添加WebP格式，也调整了threshold到0.1，但效果不明显。代码结构是这样的：


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 });

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

图片服务器已经做了响应式尺寸裁剪，但移动端加载大图时帧率还是掉到20多，有没有其他优化点没考虑到？

渲染优化

我来解答赞 3 收藏

反馈

1 条解答

迷人的树恺 Lv1

你这个情况大概率是图片解码导致的卡顿，尤其是大图在移动端设备上。拿去改改，试试这样处理：

先把图片解码放到Web Worker或者提前解码，不要让浏览器在主线程里硬扛。代码可以改成这样：

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

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      const src = img.dataset.src;



      // 创建一个临时图片对象进行预加载

      const tempImg = new Image();

      tempImg.src = src;

      tempImg.decode().then(() => {

        // 解码完成后再赋值给真实img标签

        img.src = src;

        img.classList.add('loaded'); // 可以加个class控制样式

      }).catch(() => {

        console.log('图片加载失败', src);

      });



      observer.unobserve(img);

    }

  });

}, { threshold: 0.1, rootMargin: '50px 0px' }); // 提前加载



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

另外，别忘了把CSS里的 .lazy-img 默认设置成透明度0，等加载完再渐显，体验会好很多：

.lazy-img { opacity: 0; transition: opacity 0.3s ease-in-out; }

.lazy-img.loaded { opacity: 1; }

还有几个点你可以注意下：
- 图片太大了就分块加载，比如用 background-image 配合 CSS 的 background-position 懒加载部分内容
- 如果图片数量特别多，考虑用虚拟列表，只渲染可视区域内的内容
- 最后，检查下是不是有其他脚本或者样式影响了性能，比如复杂的选择器或者频繁触发的事件监听

我之前也踩过类似的坑，后来发现是图片太大加上解码耗时，搞到主线程阻塞了。按照这个思路优化一下，应该能解决大部分问题。

2026-02-18 18:04