J*aScript懒加载_图片延迟加载_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript懒加载_图片延迟加载

2025-11-26

浏览次数：次

返回列表

图片延迟加载通过 Intersection Observer 监听元素进入视口，将 data-src 赋值给 src 实现按需加载，提升性能。

javascript懒加载_图片延迟加载

图片延迟加载（Lazy Loading）是一种优化网页性能的技术，它让图片在用户滚动到其位置时才开始加载，而不是页面一打开就加载所有图片。这种技术能显著减少初始页面加载时间、降低带宽消耗，提升用户体验，尤其适用于图片较多的长页面。

实现原理

懒加载的核心思想是：将 img 标签的 src 属性暂时移除或替换为占位图，把真实的图片地址存放在自定义属性中（如 data-src）。当图片元素进入视口（可视区域）时，再将 data-src 的值赋给 src，触发图片加载。

关键步骤：

用 data-src 存储真实图片路径
监听页面滚动或使用 Intersection Observer API
检测哪些图片进入可视区域
动态设置 src 加载图片
加载完成后可解绑事件或标记状态防止重复加载

使用 Intersection Observer 实现（推荐）

现代浏览器推荐使用 Intersection Observer，它比传统的监听 scroll 事件更高效，不会造成频繁重排重绘。

示例代码：

const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img); // 加载后停止观察
    }
  });
});

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

HTML 结构示例：