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

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

紅蓮之龍

发布： 2025-11-20 21:43:02

原创

187人浏览过

答案：JavaScript实现图片懒加载有三种方式：1. 使用getBoundingClientRect结合scroll事件和防抖检测元素位置；2. 使用Intersection Observer API异步监听元素进入视口，性能更优；3. 通过scroll事件结合offsetTop判断图片是否可见，需注意布局变化影响。推荐优先使用Intersection Observer。

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

图片懒加载是一种提升网页性能的常用技术，尤其在包含大量图片的页面中效果显著。它通过延迟加载非首屏图片，减少初始请求资源大小，加快页面渲染速度，优化用户体验。以下是 JavaScript 实现图片懒加载的三种常见方式。

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

这种方式通过定时检测图片元素与浏览器视口的位置关系，判断其是否出现在可视区域内，从而决定是否加载真实图片。

实现思路：

将图片的真实地址存放在 data-src 属性中，src 先为空或占位图。
监听页面的 scroll 事件（可配合防抖优化性能）。
遍历所有未加载的图片，使用 getBoundingClientRect() 获取其位置信息。
如果图片的 top 值小于可视区域高度，则开始加载图片。

示例代码：

网趣网上购物系统HTML静态版

网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使

查看详情

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

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

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

// 防抖处理
let timer;
window.addEventListener('scroll', () => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(loadImage, 100);
});

// 初始化调用一次
loadImage();

登录后复制

2. 使用 Intersection Observer API（推荐）

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

Intersection Observer 可以异步监听目标元素与视口的交叉状态，当图片进入视口时触发回调。

创建一个观察器实例，设置回调函数。
将每张待加载图片作为目标传入观察器。
一旦图片进入视口，加载真实图片并停止观察。

示例代码：

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

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

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

images.forEach(img => observer.observe(img));

登录后复制

优点：无需频繁监听 scroll，由浏览器优化调度，性能更好。

3. 使用 scroll + offsetTop 判断位置

这是一种较传统的方法，通过比较图片距离页面顶部的偏移量和当前滚动位置来判断是否可见。

获取图片的 offsetTop（相对于文档顶部的位置）。
结合 window.innerHeight 和 window.pageYOffset 计算是否进入视口。
同样建议加防抖避免频繁触发。

示例代码：

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

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

function checkVisible() {
  const windowHeight = window.innerHeight;
  const scrollTop = window.pageYOffset;

  images.forEach(img => {
    if (!img.src && img.offsetTop <= windowHeight + scrollTop) {
      img.src = img.dataset.src;
    }
  });
}

window.addEventListener('scroll', debounce(checkVisible, 150));

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

登录后复制

注意：offsetTop 不会实时更新布局变化，若页面结构动态变化需谨慎使用。

基本上就这些。三种方式中，Intersection Observer 是最推荐的现代方案，兼容性良好（IE 不支持，需考虑 polyfill）。前两种适合大多数场景，第三种适合低版本环境兼容。选择合适的方法能有效提升页面加载速度和用户体验。

以上就是JavaScript实现图片懒加载的三种方式_javascript性能优化的详细内容，更多请关注php中文网其它相关文章！