HTML图片怎么实现懒加载_HTML图片懒加载技术的实现原理和代码-html教程-PHP中文网

HTML图片怎么实现懒加载_HTML图片懒加载技术的实现原理和代码

星夢妙者

发布： 2025-09-27 23:40:02

原创

620人浏览过

图片懒加载通过延迟加载非可视区图片提升性能，核心是将真实地址存于data-src中，视口内再赋值src。推荐使用Intersection Observer监听进入视口，兼容老浏览器可用节流+getBoundingClientRect。

html图片怎么实现懒加载_html图片懒加载技术的实现原理和代码

图片懒加载是一种优化网页性能的技术，它能让页面在初始加载时只加载用户可视区域内的图片，其他图片在用户滚动到附近时再动态加载。这种做法能减少初始请求量，加快页面打开速度，节省带宽。

懒加载的实现原理

懒加载的核心思路是：不直接将图片的真实地址写在 src 属性中，而是先放在自定义属性（如 data-src）里。页面加载时，仅加载视口内的图片；当用户向下滚动，图片接近可视区域时，再把 data-src 的值赋给 src，触发图片加载。

判断图片是否进入视口，通常使用以下方法：

通过 getBoundingClientRect() 获取元素相对于视口的位置
结合 scroll 事件监听滚动行为
使用 Intersection Observer API 更高效地监听元素可见性（推荐方式）

使用 Intersection Observer 实现懒加载（现代方案）

Intersection Observer 是浏览器提供的 API，能异步监听元素是否进入视口，性能优于频繁监听 scroll 事件。

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

JavaScript 代码：

图酷AI

下载即用！可以免费使用的AI图像处理工具，致力于为用户提供最先进的AI图像处理技术，让图像编辑变得简单高效。

查看详情

这段代码会观察所有带有 .lazy 类的图片，一旦进入视口，就将 data-src 赋值给 src，并停止监听该元素。

传统 scroll + getBoundingClientRect 方式（兼容性更好）

如果需要支持较老的浏览器，可以手动监听滚动事件：

window.addEventListener('scroll', function() {
  const imgs = document.querySelectorAll('.lazy');
  const scrollTop = window.pageYOffset;
  const viewportHeight = window.innerHeight;

  imgs.forEach(img => {
    if (img.dataset.src === '') return; // 已加载则跳过

    const rect = img.getBoundingClientRect();
    if (rect.top <= viewportHeight && rect.bottom >= 0) {
      img.src = img.dataset.src;
      img.dataset.src = ''; // 防止重复加载
    }
  });
});

这种方式需要节流优化，避免 scroll 事件频繁触发影响性能：

function throttle(func, delay) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, delay);
    }
  };
}

window.addEventListener('scroll', throttle(checkImages, 100));