如何利用JavaScript或HTML实现图片懒加载以优化网站加载速度？

嘿，针对你想实现图片懒加载来提升页面速度的需求，我给你推荐两种实用方案，从最简单的原生HTML到更灵活的JavaScript实现，都给你捋清楚～

方案一：原生HTML懒加载（零JS成本，首选） #

现在绝大多数现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）都支持原生懒加载，不用写任何JavaScript代码就能实现，简直是懒人福音！

怎么改你的代码？ #

只需要给<img>标签加上loading="lazy"属性就行，如果想做兼容旧浏览器的降级处理，可以把真实图片地址放在data-src里，默认用一个轻量占位图：

<!-- 基础原生懒加载 -->
<img src="image1.jpg" alt="tempo traveller" loading="lazy">
<img src="image2.jpg" alt="tempo traveller" loading="lazy">

<!-- 带占位图的兼容写法 -->
<img src="placeholder-1x1.png" data-src="image1.jpg" alt="tempo traveller" loading="lazy">
<img src="placeholder-1x1.png" data-src="image2.jpg" alt="tempo traveller" loading="lazy">

优点 #

• 完全不用写JS，开发成本极低
• 浏览器原生优化，性能比很多自定义JS方案更好
• 自动根据用户的网络情况和设备调整加载时机

方案二：JavaScript实现（兼容旧浏览器/自定义逻辑） #

如果你的网站需要兼容老浏览器（比如Safari 15.4之前的版本，或者一些小众浏览器），或者需要自定义懒加载的触发时机（比如图片距离视口还有300px就提前加载），那用JavaScript的Intersection Observer API是最优解（比传统的scroll事件监听性能好太多）。

步骤1：修改HTML结构 #

把真实图片地址存在data-src属性里，默认用占位图（可以是1x1透明像素，或者低分辨率的模糊预览图），给图片加个类名方便选择：

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

步骤2：编写JavaScript代码 #

用Intersection Observer监听图片是否进入视口，触发加载：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 选中所有需要懒加载的图片
  const lazyImages = document.querySelectorAll('.lazy-image');

  // 创建观察器实例，配置加载逻辑
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 如果图片进入视口
      if (entry.isIntersecting) {
        const img = entry.target;
        // 把真实地址赋值给src
        img.src = img.dataset.src;
        // 加载完成后移除类名，停止观察该图片
        img.classList.remove('lazy-image');
        observer.unobserve(img);
      }
    });
  }, {
    // 可选：设置提前加载的距离，比如图片距离视口200px时就开始加载
    rootMargin: '200px 0px'
  });

  // 开始观察每一张懒加载图片
  lazyImages.forEach(img => observer.observe(img));
});

额外优化建议 #

• 给图片设置固定的宽高或者aspect-ratio属性，避免图片加载时的布局偏移（提升Core Web Vitals里的CLS指标）
• 占位图尽量用体积极小的资源，比如1x1的透明PNG（只有几十字节）
• 如果是背景图片的懒加载，逻辑类似：给元素加data-bg存真实背景图地址，进入视口时设置element.style.backgroundImage = 'url(' + element.dataset.bg + ')'

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