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

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

紅蓮之龍

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

原创

157人浏览过

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

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

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

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

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

实现思路：

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

示例代码：

科威旅游管理系统源码

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

150

查看详情

立即学习“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中文网其它相关文章！