HTML图片懒加载怎么实现_HTML图片懒加载实现步骤

图片懒加载通过延迟加载非首屏图片提升性能，具体实现包括：1. 用data-src存储真实图片地址；2. 监听滚动事件，利用getBoundingClientRect判断图片是否进入视口；3. 进入视口时将data-src赋值给src并标记已加载；4. 使用节流优化滚动事件性能。现代浏览器支持loading=”lazy”原生实现。

图片懒加载是一种优化网页性能的技术，它延迟加载页面中暂时不可见的图片，等用户滚动到对应位置时再加载显示。这样可以减少初始页面加载时间、降低带宽消耗。实现HTML图片懒加载并不复杂，以下是具体步骤。

1. 使用 data-src 替代 src

将图片的真实地址放在 data-src 属性中，而不是直接写在 src 里。这样浏览器不会立即加载图片。

示例：

<img class=”lazy” alt=”图片1″ />

一开始设置一个占位图或者留空，防止布局错乱。

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

2. 监听滚动事件判断图片是否进入视口

通过 JavaScript 检测哪些图片已经进入可视区域。可以用 getBoundingClientRect() 方法获取元素相对于视口的位置。

核心判断条件：

• 图片元素的 top 值小于窗口高度（且大于负的一定阈值）
• 说明图片已经出现在或接近可视区域内

示例代码片段：

function checkImages() {
  const images = document.querySelectorAll(‘img.lazy’);
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight + 100) {
      loadImage(img);
    }
  });
}

3. 加载图片并移除监听或标记已加载

当图片进入视口时，把 data-src 的值赋给 src，然后建议移除 data-src 或添加类名避免重复加载。

loadImage 函数示例：

function loadImage(img) {
  img.src = img.dataset.src;
  img.classList.remove(‘lazy’);
  img.classList.add(‘loaded’);
}

同时可以在 load 后解绑事件或做节流处理，提高性能。

4. 添加防抖或节流优化性能

滚动事件触发频繁，直接执行判断会影响性能。使用 节流（throttle） 控制函数执行频率。

简单节流示例：

let isThrottled = false;
window.addEventListener(‘scroll’, () => {
  if (!isThrottled) {
    checkImages();
    isThrottled = true;
    setTimeout(() => { isThrottled = false; }, 100);
  }
});

基本上就这些。用原生 JS 就能轻松实现懒加载，不需要依赖框架。现代浏览器也支持原生懒加载 —— 只需给 img 标签加上 loading=”lazy” 属性即可。

例如：
<img src=”https://www.php.cn/faq/image.jpg” loading=”lazy” alt=”描述” />

不复杂但容易忽略细节，比如响应式图片或动态插入内容的处理，需要额外注意。