JavaScript懒加载与预加载-js教程-PHP中文网

JavaScript懒加载与预加载

夢幻星辰

发布： 2025-10-17 18:53:01

原创

642人浏览过

懒加载延迟非关键资源加载以提升首屏速度，预加载提前获取关键资源以优化后续体验。前者通过Intersection Observer实现图片或模块按需加载，后者利用rel="preload"或new Image()提前请求资源。两者结合可显著提升网页性能与用户体验，合理控制加载时机是关键。

javascript懒加载与预加载

懒加载和预加载是优化网页性能的两种重要策略，它们通过控制资源的加载时机来提升页面响应速度与用户体验。JavaScript 中可以通过多种方式实现这两种机制。

懒加载（Lazy Loading）

懒加载指的是延迟加载非关键资源，只有当用户需要时才进行加载，比如图片进入可视区域、某个功能模块被触发等。这种方式能减少初始加载时间，节省带宽。

常见实现方式包括：

使用 Intersection Observer API 监听元素是否进入视口，进入后再加载真实图片或内容。
将图片的 src 属性替换为 data-src，初始用占位图，滚动到位置时再赋值真实地址。
对非首屏组件或模块使用动态导入（import()），实现代码分割和按需加载。

示例代码：

立即学习“Java免费学习笔记（深入）”；

const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
});

images.forEach(img => imageObserver.observe(img));

登录后复制

预加载（Preloading）

预加载则是提前加载未来可能需要的资源，以便在真正使用时能快速呈现。适用于关键资源、下一页内容、大文件等场景。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

常用方法有：

使用 link[rel="preload"] 告诉浏览器提前加载指定资源，如字体、脚本、关键 CSS 等。
通过创建 new Image() 实例预加载图片，设置其 src 触发请求。
利用 fetch() 或 new XMLHttpRequest() 预先获取数据接口内容。
在用户行为预测基础上预加载，例如鼠标悬停在链接上时预加载目标页资源。

示例代码：

立即学习“Java免费学习笔记（深入）”；

// 预加载图片
function preloadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = resolve;
    img.onerror = reject;
    img.src = url;
  });
}

// 使用
preloadImage('/images/banner-high-res.jpg').then(() => {
  console.log('图片已预加载');
});

登录后复制