图片懒加载通过延迟加载非首屏图片提升性能，核心是利用Intersection Observer或scroll事件检测图片进入视口后，将data-src赋值给src以加载真实图片，推荐使用Intersection Observer以提升效率。
图片懒加载是一种优化网页性能的常用技术，核心思路是延迟加载非首屏图片，只有当用户滚动页面、图片即将进入可视区域时，才真正加载其内容。这样可以减少初始页面加载时间、降低资源消耗，提升用户体验。
图片懒加载的基本原理
实现懒加载的关键在于判断图片是否进入视口（可视区域）。通过监听滚动事件或使用现代浏览器提供的 Intersection Observer API，我们可以检测到图片元素何时接近可见状态，然后将占位图片（如透明图）的 src 替换为真实的图片地址。
主要流程如下：
- 页面初始化时，真实图片地址存储在自定义属性中（如 data-src）
- 图片标签的 src 指向一个默认占位图或空白图
- 当图片元素进入视口范围，读取 data-src 赋值给 src，触发真实图片加载
- 可配合加载完成后的处理（如添加淡入效果）
方法一：使用 Intersection Observer（推荐）
这是现代浏览器推荐的方式，性能更好，不会频繁触发重绘或布局计算。
立即学习“Java免费学习笔记（深入）”；
// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');
<p>// 创建观察器实例
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 设置真实图片地址
img.removeAttribute('data-src'); // 移除 data-src 防止重复加载
observer.unobserve(img); // 停止观察该元素
}
});
});</p><p>// 开始观察每一张图片
lazyImages.forEach(img => {
imageObserver.observe(img);
});</p>HTML 结构示例：
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="懒加载图片">
方法二：传统 scroll 事件监听（兼容性好）
适用于不支持 Intersection Observer 的旧浏览器。通过监听页面滚动，判断图片位置是否进入视口。
function lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]');
const viewportHeight = window.innerHeight;
const scrollTop = window.pageYOffset;
<p>images.forEach(img => {
// 图片距离文档顶部的总距离
const offsetTop = img.offsetTop;</p><pre class='brush:php;toolbar:false;'>// 如果图片位置在视口下方一定范围内（预留缓冲区）
if (offsetTop - scrollTop < viewportHeight + 100) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}}); }
// 初始执行一次 lazyLoadImages();
// 监听滚动事件 window.addEventListener('scroll', lazyLoadImages);
// 可选：防抖优化，避免频繁触发 let timer; window.addEventListener('scroll', () => { if (timer) clearTimeout(timer); timer = setTimeout(lazyLoadImages, 100); });
优化建议与注意事项
为了提升体验和性能，可以考虑以下几点：
- 给图片设置固定宽高，防止加载时页面跳动
- 使用 base64 编码的小图作为占位符，减少请求数
- 添加加载完成后的淡入动画，提升视觉流畅度
- 对于大量图片，优先使用 Intersection Observer
- 注意及时解绑已加载图片的监听或观察，避免内存泄漏
基本上就这些。懒加载不复杂但容易忽略细节，合理使用能显著提升网页响应速度。
