一文手把手教你如何使用JavaScript预加载图片告别加载卡顿

/**
 * 单张预加载
 * @param {string} src - 图片地址
 * @returns {Promise<HTMLImageElement>} - 加载成功的img元素
 */
function preloadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.decoding = 'async'; // 提示浏览器可以异步解码
    img.src = src;
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`image load fail: ${src}`));
  });
}

// 用法
preloadImage('https://example.com/hero@2x.jpg')
  .then(img => console.log('英雄图搞定', img.naturalWidth))
  .catch(err => console.error('英雄图挂了', err));

/**
 * 批量预加载，带进度回调
 * @param {string[]} list - 图片url数组
 * @param {object} [options] - 配置
 * @param {number} [options.concurrency=6] - 并发数，HTTP/1.1下建议≤6
 * @param {function} [options.onProgress] - 单张完成回调 (loaded, total)=>{}
 * @returns {Promise<{ok: string[], fail: string[]}>}
 */
function preloadImages(list, { concurrency = 6, onProgress } = {}) {
  return new Promise(resolve => {
    const total = list.length;
    let loaded = 0, failed = 0;
    const ok = [], fail = [];
    let idx = 0;

    function next() {
      if (idx >= total) {
        // 全部完成
        if (loaded + failed === total) resolve({ ok, fail });
        return;
      }
      const cur = idx++;
      const src = list[cur];
      preloadImage(src)
        .then(() => {
          ok.push(src);
          loaded++;
          onProgress?.(loaded + failed, total);
        })
        .catch(() => {
          fail.push(src);
          failed++;
          onProgress?.(loaded + failed, total);
        })
        .finally(() => next()); // 无论成功失败都递归补位
    }

    // 启动并发池
    for (let i = 0; i < Math.min(concurrency, total); i++) next();
  });
}

// 用法
preloadImages(
  [
    'https://cdn.a.com/pic1.jpg',
    'https://cdn.a.com/pic2.jpg',
    'https://cdn.a.com/pic3.jpg'
  ],
  {
    onProgress: (cur, total) => {
      const percent = ((cur / total) * 100).toFixed(2);
      console.log(`进度：${percent}%`);
      document.querySelector('.progress-bar').style.width = percent + '%';
    }
  }
).then(({ ok, fail }) => {
  console.log(' success:', ok.length, ' fail:', fail.length);
});

class ImagePreloader {
  constructor(options = {}) {
    this.cache = new Map(); // <url, Promise<HTMLImageElement>>
    this.concurrency = options.concurrency || 6;
  }

  /**
   * 加载单张，带缓存
   */
  load(src) {
    if (this.cache.has(src)) return this.cache.get(src);
    const job = preloadImage(src);
    this.cache.set(src, job);
    return job;
  }

  /**
   * 批量加载
   */
  loadGroup(list, onProgress) {
    return preloadImages(list, {
      concurrency: this.concurrency,
      onProgress
    });
  }

  /**
   * 清空缓存
   */
  clear() {
    this.cache.clear();
  }
}

// 全局单例
export const preloader = new ImagePreloader({ concurrency: 8 });

async function asyncPool(poolLimit, list, iteratorFn) {
  const ret = [];
  const executing = [];
  for (const item of list) {
    const p = Promise.resolve().then(() => iteratorFn(item));
    ret.push(p);
    if (poolLimit <= list.length) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= poolLimit) await Promise.race(executing);
    }
  }
  return Promise.all(ret);
}

// 调用
const urls = ['1.jpg', '2.jpg', '3.jpg'];
await asyncPool(6, urls, url => preloadImage(url));

// React Hook示例
function usePreloadSlider(list) {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    preloader.loadGroup(list.map(item => item.pic)).then(() => setReady(true));
  }, [list]);
  return ready;
}

function Slider({ data }) {
  const ready = usePreloadSlider(data);
  if (!ready) return <SkeletonSlider />;
  return (
    <Swiper>
      {data.map(item => (
        <img key={item.id} src={item.pic} alt={item.title} />
      ))}
    </Swiper>
  );
}

// 检测损坏
async function isImageBroken(src) {
  try {
    const img = await preloadImage(src);
    await img.decode(); // 如果解码失败会抛错
    return false;
  } catch {
    return true;
  }
}

const cache = new WeakMap(); // 键是Image对象，值无所谓
function loadOnce(imgEl) {
  if (cache.has(imgEl)) return Promise.resolve(imgEl);
  return new Promise((resolve, reject) => {
    imgEl.onload = () => {
      cache.set(imgEl, true);
      resolve(imgEl);
    };
    imgEl.onerror = reject;
    if (imgEl.complete) resolve(imgEl); // 已缓存过
  });
}

const io = new IntersectionObserver(entries => {
  entries.forEach(en => {
    if (en.isIntersecting) {
      const img = en.target;
      const src = img.dataset.prefetch;
      if (src) {
        preloader.load(src); // 进入视口前200px开始拉
        io.unobserve(img);
      }
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-prefetch]').forEach(img => io.observe(img));

// sw.js
self.addEventListener('fetch', e => {
  if (e.request.destination === 'image') {
    e.respondWith(
      caches.open('img-v1').then(async cache => {
        const cached = await cache.match(e.request);
        if (cached) {
          // 后台更新
          fetch(e.request).then(res => cache.put(e.request, res.clone()));
          return cached;
        }
        const res = await fetch(e.request);
        cache.put(e.request, res.clone());
        return res;
      })
    );
  }
});

// worker.js
self.onmessage = async e => {
  const { url, id } = e.data;
  const res = await fetch(url);
  const blob = await res.blob();
  const bmp = await createImageBitmap(blob);
  self.postMessage({ id, bmp }, [bmp]);
};