JavaScript图片懒加载的三种技巧

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript图片懒加载的三种实现方法》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

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

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

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

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

实现思路：

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

示例代码：

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 可以异步监听目标元素与视口的交叉状态，当图片进入视口时触发回调。

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

示例代码：

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 计算是否进入视口。
• 同样建议加防抖避免频繁触发。

示例代码：

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）。前两种适合大多数场景，第三种适合低版本环境兼容。选择合适的方法能有效提升页面加载速度和用户体验。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。