图片懒加载的核心思路是延迟加载非首屏图片，待其接近视口时再加载。通过将真实图片路径存于data-src属性，初始用占位图填充src，避免布局抖动；JavaScript监听滚动或使用Intersection Observer判断图片是否进入视口，动态赋值src完成加载。为提升性能，可采用节流控制scroll事件，或优先使用Intersection Observer API实现高效监听，并设置rootMargin提前加载；针对不支持的浏览器（如IE），通过特性检测回退至scroll事件方案并可引入polyfill。合理选择技术方案可显著优化首屏加载速度与用户体验。
图片懒加载的核心思路是：页面初次加载时不加载所有图片，而是等到图片即将进入可视区域时再动态加载。这种做法能显著减少首屏加载时间，降低服务器压力。实现的关键在于判断元素是否接近视口，并用 JavaScript 动态设置 img 的 src 属性。
1. 基础原理与HTML结构
使用懒加载时，图片的真实路径不放在 src 中，而是放在自定义属性如 data-src 里。初始时可以用一张极小的占位图（比如 base64 编码的灰色图）作为 src，防止页面布局抖动。
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="示例图片">
JavaScript 的任务就是监听滚动事件，检查哪些图片已进入或即将进入视口，然后把 data-src 的值赋给 src。
2. 核心JavaScript实现
通过 getBoundingClientRect() 判断元素位置，结合 scroll 事件触发检测。
function lazyLoad() {
const images = document.querySelectorAll('img.lazy');
const windowHeight = window.innerHeight;
images.forEach(img => {
const rect = img.getBoundingClientRect();
// 图片距离视口顶部小于屏幕高度即开始加载
if (rect.top < windowHeight + 100) {
if (img.dataset.src) {
img.src = img.dataset.src;
img.classList.remove('lazy'); // 防止重复处理
}
}
});
}
// 初次加载和滚动时执行
window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);
3. 性能优化技巧
频繁触发 scroll 事件可能影响性能，需进行节流控制。同时可提前加载即将出现的图片，提升用户体验。
- 使用 throttle 节流：避免 scroll 事件过于频繁执行回调
- Intersection Observer API：现代浏览器推荐方案，性能更好，无需手动计算位置
- 预加载偏移量：设置阈值（如 100px），在图片进入视口前就加载，避免白屏
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
observer.unobserve(img); // 加载后停止监听
}
});
}, {
rootMargin: '100px' // 提前100px开始加载
});
document.querySelectorAll('img.lazy').forEach(img => {
observer.observe(img);
});
4. 兼容性与降级处理
IntersectionObserver 在老版本浏览器中不支持（如 IE），需要降级到 scroll + getBoundingClientRect 方案。
可通过特性检测自动选择实现方式：
if ('IntersectionObserver' in window) {
// 使用 Observer 方式
} else {
// 回退到 scroll 事件监听
window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad);
}
对于必须支持 IE 的项目，建议引入轻量 polyfill 或直接采用传统方法。
基本上就这些。合理使用懒加载能有效提升网页性能，关键是选择合适的技术方案并做好兼容与性能平衡。
