JavaScript图片懒加载三种方法详解

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript图片懒加载三种实现方式》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

优先推荐使用Intersection Observer API实现图片懒加载，通过监听元素是否进入视口异步加载图片，性能好且代码简洁；对于旧浏览器可降级采用scroll事件配合getBoundingClientRect或offsetTop判断位置，并结合节流或防抖优化性能。

图片懒加载是一种优化网页性能的常用技术，能有效减少首屏加载时间、降低服务器压力。它通过延迟加载非首屏图片，只有当用户滚动到可视区域时才加载对应图片。以下是 JavaScript 实现图片懒加载的三种常见方式。

1. 使用 getBoundingClientRect 判断元素是否进入视口

这种方式通过定时检测图片元素与浏览器视口的位置关系，判断是否需要加载。

实现思路：

• 给所有需要懒加载的图片设置 data-src 属性，存放真实图片地址。
• 初始时 img 的 src 指向占位图或为空。
• 监听 scroll 事件，遍历所有未加载的图片，调用 getBoundingClientRect() 获取其位置。
• 如果图片的 top 值小于可视区域高度（且处于向下滚动），则将 data-src 赋值给 src，完成加载。

示例代码：

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

function checkVisible() {
  const windowHeight = window.innerHeight;
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < windowHeight && !img.src) {
      img.src = img.dataset.src;
    }
  });
}

window.addEventListener('scroll', checkVisible);
checkVisible(); // 初始化检查一次

注意：scroll 事件频繁触发，建议结合防抖（debounce）优化性能。

2. 使用 Intersection Observer API（推荐）

这是现代浏览器推荐的方式，无需手动计算位置，性能更好，代码更简洁。

实现原理：

• 创建一个 IntersectionObserver 实例，监听目标元素是否进入视口。
• 当元素可见时，回调函数触发，加载真实图片。
• 加载完成后可停止监听该元素。

示例代码：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载后停止监听
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Intersection Observer 是异步执行，不会阻塞页面渲染，适合大量图片场景。

3. 使用 scroll + offsetTop 配合节流

通过元素距离文档顶部的偏移量（offsetTop）与页面滚动位置比较，判断是否进入视口。

实现步骤：

• 记录每张图片的 offsetTop 值（可缓存避免重复计算）。
• 监听页面 scroll 事件，获取当前滚动距离（window.pageYOffset）。
• 结合可视区域高度，判断图片是否进入视野。
• 使用节流函数控制检测频率，防止频繁执行。

示例代码（含节流）：

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

const imgs = document.querySelectorAll('img[data-src]');
let imageIndex = 0;

function lazyLoad() {
  const scrollTop = window.pageYOffset;
  const clientHeight = window.innerHeight;

  for (let i = imageIndex; i < imgs.length; i++) {
    if (imgs[i].offsetTop < scrollTop + clientHeight) {
      imgs[i].src = imgs[i].dataset.src;
      imageIndex++;
    }
  }
}

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

这种方式兼容性好，适合不支持 Intersection Observer 的旧浏览器。

基本上就这些。优先推荐使用 Intersection Observer，兼顾性能和可维护性。在需要兼容老版本浏览器时，可降级使用 scroll + getBoundingClientRect 或 offsetTop 方案，并配合节流优化。图片懒加载虽小，但对用户体验提升明显。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript图片懒加载三种方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。