J*aScript懒加载与预加载

发布时间：2025-10-17

点击量：

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

javascript懒加载与预加载

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

懒加载（Lazy Loading）

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

常见实现方式包括：

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

示例代码：

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）

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

常用方法有：

jQuery瀑布流图片预加载展示代码

jQuery瀑布流图片预加载展示代码是一款基于modernizr.js制作瀑布流图片预加载动画特效。

25 查看详情 jQuery瀑布流图片预加载展示代码

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

示例代码：

// 预加载图片
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('图片已预加载');
});

适用场景对比

懒加载适合首屏之外的内容，比如长页面中的图片、视频、非核心 JS 模块；预加载更适合用户即将访问的内容，比如轮播图下一张、分页下一页数据、登录后可能用到的模块。

合理搭配两者能显著提升性能：首屏关键资源预加载，非关键资源懒加载，形成流畅体验。

基本上就这些，掌握好加载时机，才能让网页又快又省。不复杂但容易忽略。

以上就是J*aScript懒加载与预加载的详细内容，更多请关注其它相关文章！

上一篇：在css中如何用filter调整元素颜色

下一篇：如何通过css transition-duration控制动