图片懒加载通过延迟加载非可视区域图片来提升性能，具体做法是将真实图片地址存于data-src属性，当图片接近视口时再赋值给src。传统方法使用scroll事件结合getBoundingClientRect判断位置，需节流优化性能；现代方案推荐Intersection Observer API，异步监听元素可见性，性能更高且语法简洁。配合rootMargin预加载、占位图防抖动及CSS淡入动画可进一步优化体验，优先选用Intersection Observer并考虑兼容性降级处理。
图片懒加载是一种优化网页性能的常用技术，核心思路是延迟加载可视区域外的图片，只有当用户滚动页面、图片即将进入视口时才开始加载。这样可以减少初始页面加载时间、降低带宽消耗、提升用户体验。JavaScript 提供了多种方式来实现这一功能。
一、基本原理与实现思路
图片懒加载的关键在于：不直接将真实图片地址写在 src 属性中，而是先用一个占位图或空白代替，真实地址存放在自定义属性（如 data-src）中。当图片元素接近或进入浏览器视口时，再通过 JavaScript 将 data-src 的值赋给 src，触发图片加载。
实现步骤如下：
- HTML 中使用
data-src存储真实图片路径 - 监听滚动事件或使用 Intersection Observer 监听元素是否可见
- 一旦图片进入可视范围，替换
src并可选地移除监听以避免重复执行
@@##@@
二、传统方法：scroll + getBoundingClientRect
通过监听 window.onscroll 事件，并结合 getBoundingClientRect() 判断元素是否进入视口。
立即学习“Java免费学习笔记（深入）”；
代码实现：
function lazyLoad() {
const images = document.querySelectorAll('img.lazy');
const windowHeight = window.innerHeight;
images.forEach(img => {
const rect = img.getBoundingClientRect();
// 图片顶部距离视口顶部小于窗口高度，且尚未加载
if (rect.top <= windowHeight && !img.src.includes(img.dataset.src)) {
img.src = img.dataset.src;
img.classList.remove('lazy'); // 可选：标记已加载
}
});
}
// 初始化调用一次，防止首屏图片未触发滚动
lazyLoad();
window.addEventListener('scroll', lazyLoad);
优点：兼容性好，支持老版本浏览器。
缺点：频繁触发 scroll 事件可能影响性能，建议配合节流（throttle）优化。
加入节流处理：
function throttle(fn, delay) {
let flag = true;
return function () {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, delay);
};
}
window.addEventListener('scroll', throttle(lazyLoad, 100));
三、现代推荐方案：Intersection Observer API
Intersection Observer 是浏览器提供的原生 API，用于异步监听元素与视口的交叉状态，无需手动计算位置，性能更优。
实现代码：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img); // 加载后停止监听
}
});
});
// 观察所有懒加载图片
document.querySelectorAll('img.lazy').forEach(img => {
observer.observe(img);
});
优点：
- 性能高，不占用主线程
- 语法简洁，逻辑清晰
- 自动处理滚动、resize 等场景
注意：部分旧版浏览器（如 IE）不支持，需考虑降级方案或引入 polyfill。
四、优化建议与最佳实践
为了获得更好的用户体验和性能表现，可以结合以下技巧：
-
提前加载临近图片：设置 rootMargin 扩大观察区域，例如
{ rootMargin: '50px' }，让图片在进入视口前就开始加载 - 使用占位符或低质量图像占位（LQIP）：避免页面跳动，提升感知性能
- 图片加载完成后添加淡入动画：通过 CSS 过渡提升视觉体验
-
服务端配合响应式图片：使用
srcset和sizes提供合适分辨率的图片
CSS 示例（平滑显示）：
img.lazy {
opacity: 0.5;
transition: opacity 0.3s ease-in;
}
img:not(.lazy) {
opacity: 1;
}
基本上就这些。根据项目需求选择合适的实现方式，优先推荐使用 Intersection Observer 配合节流和占位策略，兼顾性能与体验。
