当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript图片懒加载原理及实现方法

JavaScript图片懒加载原理及实现方法

2025-12-02 14:47:53 0浏览收藏

图片懒加载的基本原理

实现懒加载的关键在于判断图片是否进入视口（可视区域）。通过监听滚动事件或使用现代浏览器提供的 Intersection Observer API，我们可以检测到图片元素何时接近可见状态，然后将占位图片（如透明图）的 src 替换为真实的图片地址。

主要流程如下：

页面初始化时，真实图片地址存储在自定义属性中（如 data-src）
图片标签的 src 指向一个默认占位图或空白图
当图片元素进入视口范围，读取 data-src 赋值给 src，触发真实图片加载
可配合加载完成后的处理（如添加淡入效果）

方法一：使用 Intersection Observer（推荐）

这是现代浏览器推荐的方式，性能更好，不会频繁触发重绘或布局计算。

// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');
// 创建观察器实例
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 设置真实图片地址
img.removeAttribute('data-src'); // 移除 data-src 防止重复加载
observer.unobserve(img); // 停止观察该元素
}
});
});
// 开始观察每一张图片
lazyImages.forEach(img => {
imageObserver.observe(img);
});

HTML 结构示例：

方法二：传统 scroll 事件监听（兼容性好）

适用于不支持 Intersection Observer 的旧浏览器。通过监听页面滚动，判断图片位置是否进入视口。

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const viewportHeight = window.innerHeight;
  const scrollTop = window.pageYOffset;
images.forEach(img => {
// 图片距离文档顶部的总距离
const offsetTop = img.offsetTop;
// 如果图片位置在视口下方一定范围内（预留缓冲区）
if (offsetTop - scrollTop < viewportHeight + 100) {
  img.src = img.dataset.src;
  img.removeAttribute('data-src');
}
});
}
// 初始执行一次
lazyLoadImages();
// 监听滚动事件
window.addEventListener('scroll', lazyLoadImages);
// 可选：防抖优化，避免频繁触发
let timer;
window.addEventListener('scroll', () => {
if (timer) clearTimeout(timer);
timer = setTimeout(lazyLoadImages, 100);
});