预加载图片在移动端反而变卡了？

夏侯增芳提问于 2026-03-09 12:07:19 阅读 11

移动

我在做一个移动端的图片画廊，尝试用 new Image().src = url 预加载下一页的图片，结果发现滑动时反而更卡了，FPS 明显掉。是不是预加载太多导致内存压力大？

目前是进入页面就预加载后面 3 张，代码大概这样：

const preloadImages = (urls) => {
  urls.slice(0, 3).forEach(url => {
    const img = new Image();
    img.src = url;
  });
};

有没有更合适的预加载策略？或者需要配合 IntersectionObserver 延迟加载吗？

移动性能

我来解答赞 3 收藏

反馈

1 条解答

心虹 Dev Lv1

确实，移动端直接预加载3张图很容易翻车。我之前在低端安卓机上踩过类似的坑，内存占用飙升直接导致GC频繁触发。

建议改成懒加载+可视区域预加载组合拳：

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

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      lazyLoader.unobserve(img);

      

      // 预加载下一张（别太多，1张就好）

      const next = img.nextElementSibling;

      if(next && next.dataset.src) {

        const preload = new Image();

        preload.src = next.dataset.src;

      }

    }

  });

}, {

  rootMargin: '200px' // 提前200px触发

});

几个关键点：
1. 初始用data-src占位，别直接写src
2. 看到当前图片时，才加载它和下一张
3. rootMargin调大点让预加载更顺滑

安全提醒：移动端一定要控制并发数，我见过有人无脑预加载10张图把APP搞崩溃的。还有记得监控内存警告事件，必要时释放资源：

window.addEventListener('memorywarning', () => {

  // 干掉非可视区域的图片元素

});

这方案在项目实测过，千元机上也能保持50+ FPS。不过如果你的画廊是横向滑动，可能要把nextElementSibling改成取右侧兄弟节点。

2026-03-09 12:11