图片懒加载通过延迟加载非首屏图片提升性能，具体实现包括：1. 用data-src存储真实图片地址；2. 监听滚动事件，利用getBoundingClientRect判断图片是否进入视口；3. 进入视口时将data-src赋值给src并标记已加载；4. 使用节流优化滚动事件性能。现代浏览器支持loading="lazy"原生实现。
图片懒加载是一种优化网页性能的技术，它延迟加载页面中暂时不可见的图片，等用户滚动到对应位置时再加载显示。这样可以减少初始页面加载时间、降低带宽消耗。实现HTML图片懒加载并不复杂，以下是具体步骤。
1. 使用 data-src 替代 src
将图片的真实地址放在 data-src 属性中，而不是直接写在 src 里。这样浏览器不会立即加载图片。
示例：<img class="lazy" alt="图片1" />
一开始设置一个占位图或者留空，防止布局错乱。
立即学习“前端免费学习笔记（深入）”；
2. 监听滚动事件判断图片是否进入视口
通过 JavaScript 检测哪些图片已经进入可视区域。可以用 getBoundingClientRect() 方法获取元素相对于视口的位置。
核心判断条件：- 图片元素的 top 值小于窗口高度（且大于负的一定阈值）
- 说明图片已经出现在或接近可视区域内
示例代码片段：
function checkImages() {
const images = document.querySelectorAll('img.lazy');
images.forEach(img => {
const rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight + 100) {
loadImage(img);
}
});
}
3. 加载图片并移除监听或标记已加载
当图片进入视口时，把 data-src 的值赋给 src，然后建议移除 data-src 或添加类名避免重复加载。
loadImage 函数示例：
function loadImage(img) {
img.src = img.dataset.src;
img.classList.remove('lazy');
img.classList.add('loaded');
}
同时可以在 load 后解绑事件或做节流处理，提高性能。
4. 添加防抖或节流优化性能
滚动事件触发频繁，直接执行判断会影响性能。使用 节流（throttle） 控制函数执行频率。
简单节流示例：
let isThrottled = false;
window.addEventListener('scroll', () => {
if (!isThrottled) {
checkImages();
isThrottled = true;
setTimeout(() => { isThrottled = false; }, 100);
}
});
基本上就这些。用原生 JS 就能轻松实现懒加载，不需要依赖框架。现代浏览器也支持原生懒加载 —— 只需给 img 标签加上 loading="lazy" 属性即可。
例如：
<img src="image.jpg" loading="lazy" alt="描述" />
不复杂但容易忽略细节，比如响应式图片或动态插入内容的处理，需要额外注意。
