图片懒加载通过延迟加载非可视区图片提升性能，核心是将真实地址存于data-src中，视口内再赋值src。推荐使用Intersection Observer监听进入视口，兼容老浏览器可用节流+getBoundingClientRect。
图片懒加载是一种优化网页性能的技术，它能让页面在初始加载时只加载用户可视区域内的图片，其他图片在用户滚动到附近时再动态加载。这种做法能减少初始请求量，加快页面打开速度，节省带宽。
懒加载的实现原理
懒加载的核心思路是：不直接将图片的真实地址写在 src 属性中，而是先放在自定义属性（如 data-src）里。页面加载时，仅加载视口内的图片；当用户向下滚动，图片接近可视区域时，再把 data-src 的值赋给 src，触发图片加载。
判断图片是否进入视口，通常使用以下方法：
- 通过 getBoundingClientRect() 获取元素相对于视口的位置
- 结合 scroll 事件监听滚动行为
- 使用 Intersection Observer API 更高效地监听元素可见性（推荐方式）
使用 Intersection Observer 实现懒加载（现代方案）
Intersection Observer 是浏览器提供的 API，能异步监听元素是否进入视口，性能优于频繁监听 scroll 事件。
立即学习“前端免费学习笔记（深入）”；
<img class="lazy" alt="图片1"><img class="lazy" alt="图片2">
<img class="lazy" alt="图片3">
JavaScript 代码：
const images = document.querySelectorAll('.lazy');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
imageObserver.unobserve(img);
}
});
});
images.forEach(img => {
imageObserver.observe(img);
});
这段代码会观察所有带有 .lazy 类的图片，一旦进入视口，就将 data-src 赋值给 src，并停止监听该元素。
传统 scroll + getBoundingClientRect 方式（兼容性更好）
如果需要支持较老的浏览器，可以手动监听滚动事件：
window.addEventListener('scroll', function() {const imgs = document.querySelectorAll('.lazy');
const scrollTop = window.pageYOffset;
const viewportHeight = window.innerHeight;
imgs.forEach(img => {
if (img.dataset.src === '') return; // 已加载则跳过
const rect = img.getBoundingClientRect();
if (rect.top <= viewportHeight && rect.bottom >= 0) {
img.src = img.dataset.src;
img.dataset.src = ''; // 防止重复加载
}
});
});
这种方式需要节流优化，避免 scroll 事件频繁触发影响性能：
function throttle(func, delay) {let inThrottle;
return function() {
if (!inThrottle) {
func.apply(this, arguments);
inThrottle = true;
setTimeout(() => inThrottle = false, delay);
}
};
}
window.addEventListener('scroll', throttle(checkImages, 100));
小结与建议
现代项目推荐使用 Intersection Observer 实现懒加载，性能好且代码简洁。对于需要兼容 IE 的场景，可采用节流 + getBoundingClientRect 的方式。同时记得给图片设置固定宽高，避免加载时页面抖动。
基本上就这些，实现起来不复杂但效果明显。
