JavaScript实现图片懒加载的三种方式_javascript优化-js教程-PHP中文网

JavaScript实现图片懒加载的三种方式_javascript优化

夢幻星辰

发布： 2025-11-05 22:58:03

原创

253人浏览过

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

javascript实现图片懒加载的三种方式_javascript优化

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

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

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

实现思路：

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

示例代码：

改图鸭AI图片生成

查看详情

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

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 实例，监听目标元素是否进入视口。
当元素可见时，回调函数触发，加载真实图片。
加载完成后可停止监听该元素。

示例代码：

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

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实现图片懒加载的三种方式_javascript优化的详细内容，更多请关注php中文网其它相关文章！