优先推荐使用Intersection Observer API实现图片懒加载，通过监听元素是否进入视口异步加载图片，性能好且代码简洁；对于旧浏览器可降级采用scroll事件配合getBoundingClientRect或offsetTop判断位置，并结合节流或防抖优化性能。
图片懒加载是一种优化网页性能的常用技术，能有效减少首屏加载时间、降低服务器压力。它通过延迟加载非首屏图片，只有当用户滚动到可视区域时才加载对应图片。以下是 JavaScript 实现图片懒加载的三种常见方式。
1. 使用 getBoundingClientRect 判断元素是否进入视口
这种方式通过定时检测图片元素与浏览器视口的位置关系，判断是否需要加载。
实现思路：
- 给所有需要懒加载的图片设置 data-src 属性，存放真实图片地址。
- 初始时 img 的 src 指向占位图或为空。
- 监听 scroll 事件，遍历所有未加载的图片，调用 getBoundingClientRect() 获取其位置。
- 如果图片的 top 值小于可视区域高度（且处于向下滚动），则将 data-src 赋值给 src，完成加载。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const images = document.querySelectorAll('img[data-src]');
function checkVisible() {
const windowHeight = window.innerHeight;
images.forEach(img => {
const rect = img.getBoundingClientRect();
if (rect.top < windowHeight && !img.src) {
img.src = img.dataset.src;
}
});
}
window.addEventListener('scroll', checkVisible);
checkVisible(); // 初始化检查一次
注意：scroll 事件频繁触发，建议结合防抖（debounce）优化性能。
2. 使用 Intersection Observer API（推荐）
这是现代浏览器推荐的方式，无需手动计算位置，性能更好，代码更简洁。
实现原理：
- 创建一个 IntersectionObserver 实例，监听目标元素是否进入视口。
- 当元素可见时，回调函数触发，加载真实图片。
- 加载完成后可停止监听该元素。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img); // 加载后停止监听
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
Intersection Observer 是异步执行，不会阻塞页面渲染，适合大量图片场景。
3. 使用 scroll + offsetTop 配合节流
通过元素距离文档顶部的偏移量（offsetTop）与页面滚动位置比较，判断是否进入视口。
实现步骤：
- 记录每张图片的 offsetTop 值（可缓存避免重复计算）。
- 监听页面 scroll 事件，获取当前滚动距离（window.pageYOffset）。
- 结合可视区域高度，判断图片是否进入视野。
- 使用节流函数控制检测频率，防止频繁执行。
示例代码（含节流）：
function throttle(fn, delay) {
let flag = true;
return function () {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, delay);
};
}
const imgs = document.querySelectorAll('img[data-src]');
let imageIndex = 0;
function lazyLoad() {
const scrollTop = window.pageYOffset;
const clientHeight = window.innerHeight;
for (let i = imageIndex; i < imgs.length; i++) {
if (imgs[i].offsetTop < scrollTop + clientHeight) {
imgs[i].src = imgs[i].dataset.src;
imageIndex++;
}
}
}
window.addEventListener('scroll', throttle(lazyLoad, 100));
这种方式兼容性好，适合不支持 Intersection Observer 的旧浏览器。
基本上就这些。优先推荐使用 Intersection Observer，兼顾性能和可维护性。在需要兼容老版本浏览器时，可降级使用 scroll + getBoundingClientRect 或 offsetTop 方案，并配合节流优化。图片懒加载虽小，但对用户体验提升明显。
