如何用JavaScript或HTML实现懒加载以提升网站加载速度？

要实现图片懒加载，目前有两种实用方案，分别是原生HTML属性（最简单高效）和JavaScript自定义实现（适配旧浏览器或个性化需求），具体操作如下：

一、原生HTML懒加载（优先推荐） #

现代浏览器已原生支持图片懒加载，无需额外编写JavaScript代码，只需给<img>标签添加loading="lazy"属性即可。

修改你的HTML代码：

<img src="image1.jpg" alt="tempo traveller" loading="lazy">
<img src="image2.jpg" alt="tempo traveller" loading="lazy">

• 核心优势：零代码成本、浏览器原生优化，性能比自定义JS方案更稳定
• 兼容性：Chrome、Firefox、Edge、Safari 15.4+均支持，覆盖绝大多数现代用户
• 适用场景：不需要兼容老旧浏览器（如IE）的项目，直接用这个方案最省心

二、JavaScript自定义实现（兼容旧浏览器/自定义需求） #

如果需要适配老旧浏览器，或者要实现自定义加载阈值、加载动画等功能，推荐使用Intersection Observer API（比传统滚动监听性能更优）。

步骤1：调整HTML结构 #

将真实图片地址存入data-src属性，src属性使用占位图（比如1x1透明像素图、低质量模糊占位图）：

<img src="placeholder.png" data-src="image1.jpg" alt="tempo traveller" class="lazy">
<img src="placeholder.png" data-src="image2.jpg" alt="tempo traveller" class="lazy">

步骤2：编写JavaScript逻辑 #

通过Intersection Observer监听图片是否进入视口，进入后替换src为真实地址：

// 获取所有标记为懒加载的图片
const lazyImages = document.querySelectorAll('img.lazy');

// 创建观察者实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      // 替换为真实图片地址
      img.src = img.dataset.src;
      // 图片加载完成后停止监听
      observer.unobserve(img);
      // 可在此处添加加载完成的动画逻辑
    }
  });
}, {
  // 可选配置：提前500px开始加载，提升用户体验
  rootMargin: '500px 0px'
});

// 为每个懒加载图片添加监听
lazyImages.forEach(img => {
  observer.observe(img);
});

备选：传统滚动监听（不推荐，性能较差） #

如果需要兼容完全不支持Intersection Observer的老旧浏览器，可以用滚动监听，但记得做节流优化：

function lazyLoad() {
  const lazyImages = document.querySelectorAll('img.lazy');
  lazyImages.forEach(img => {
    const rect = img.getBoundingClientRect();
    // 判断图片是否进入视口范围
    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      img.src = img.dataset.src;
      // 移除class避免重复处理
      img.classList.remove('lazy');
    }
  });
}

// 监听滚动和窗口 resize 事件
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
// 页面初始化时执行一次
lazyLoad();

注意事项 #

• 不要省略alt属性，这对SEO和无障碍访问至关重要
• 占位图尽量选择体积极小的文件，避免影响页面初始加载速度
• 测试时可使用浏览器的网络节流功能（如Chrome DevTools的Slow 3G模式），模拟慢网环境验证懒加载效果

内容的提问来源于stack exchange，提问作者Ajay