J*aScript实现图片懒加载的三种方式_j*ascript优化

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JaScript实现图片懒加载的三种方式_jascript优化

2025-11-05

浏览次数：次

返回列表

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

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

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

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

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

实现思路：

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

示例代码：

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

0 查看详情科威旅游管理系统

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));