预加载技术全解析与性能提升实战经验分享

先看效果，再看代码

最近在开发一个项目的时候，遇到个需求：页面上有几张大图，用户切换到下一页时加载会卡顿。为了解决这个问题，我尝试了预加载技术，亲测有效！直接来看代码：

const preloadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = () => resolve(url);
    img.onerror = (err) => reject(err);
  });
};

// 使用方式
preloadImage('https://jztheme.com/assets/image1.jpg')
  .then(() => console.log('图片加载完成'))
  .catch((err) => console.error('加载失败', err));

把这段代码放到你的项目里，图片就会提前加载好，用户切换时完全无感。建议直接用这种方式，简单又高效。

这个场景最好用

预加载最适合的场景就是需要提前加载资源但又不想阻塞页面渲染的情况。比如：

• 电商网站的商品详情页图片
• 轮播图的下一张图片
• 游戏或动画的素材资源

举个例子，在做轮播图的时候，如果只加载当前显示的图片，用户滑动到下一张时会有明显的延迟。这时候就可以用预加载提前把下一张图片加载好：

const images = [
  'https://jztheme.com/assets/image1.jpg',
  'https://jztheme.com/assets/image2.jpg',
  'https://jztheme.com/assets/image3.jpg'
];

images.forEach((image) => {
  preloadImage(image);
});

这样用户的体验会流畅很多。

踩坑提醒：这三点一定注意

虽然预加载看起来很简单，但我踩过几个坑，这里给大家提个醒：

1. 不要滥用预加载。如果你把所有资源都预加载了，可能会占用过多带宽，反而影响其他资源的加载。比如我在一个项目里，把所有的图片和视频都预加载了，结果导致首屏加载特别慢。
2. 跨域问题。如果你加载的资源是跨域的，一定要确保服务器配置了正确的CORS策略，否则图片可能加载不出来。我之前就因为这个问题折腾了半天。
3. 缓存问题。有时候你以为预加载成功了，但其实是因为浏览器缓存了资源。测试的时候记得清除缓存，或者加个时间戳参数来验证。

这些问题我都踩过，写在这里希望能帮你少走弯路。

高级技巧：结合IntersectionObserver

如果你的需求更复杂，比如只希望在用户即将看到某个元素时才开始加载资源，可以结合 IntersectionObserver 来实现懒加载+预加载的效果：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.dataset.src;
      preloadImage(src).then(() => {
        img.src = src;
        observer.unobserve(img); // 加载完成后停止观察
      });
    }
  });
});

// HTML结构
document.querySelectorAll('.lazy-load').forEach((img) => {
  observer.observe(img);
});

HTML部分：

<img class="lazy-load" data-src="https://jztheme.com/assets/image1.jpg" alt="Lazy Load Image">
<img class="lazy-load" data-src="https://jztheme.com/assets/image2.jpg" alt="Lazy Load Image">

这种方式的好处是既能节省带宽，又能提升用户体验。不过要注意，IntersectionObserver 的兼容性稍微差一点，低版本浏览器可能需要引入 polyfill。

其他小技巧和注意事项

除了图片，预加载还可以用在其他资源上，比如字体、CSS文件、JavaScript文件等。下面是一个预加载字体的例子：

“html
<link rel="preload" href="https://jztheme.com/assets/font.woff2" as="font" type="font/woff2" crossorigin>
`>

这里有个小细节：as属性很重要，它告诉浏览器你加载的是什么类型的资源。如果填错了，可能会导致加载优先级不对。

另外，别忘了给字体加上 crossorigin 属性，不然有些浏览器会报跨域错误。

这个技术的拓展用法还有很多，后续会继续分享这类博客

以上是我对预加载的一些实战经验总结。从简单的图片预加载，到结合 IntersectionObserver 实现更复杂的场景，预加载确实是个很实用的技术。当然，它的用法远不止这些，比如可以用在SPA（单页应用）的路由切换中，提前加载下一个页面的资源。

如果你有更好的实现方式，欢迎在评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享相关的博客。