html图片懒加载的核心是用占位符（如空src或data-src）替代真实路径，待图片进入视口再赋值触发加载；支持原生loading="lazy"（chrome 76+等）和intersection observer手动实现，需注意宽高设置、seo优化及首屏降级。
HTML图片懒加载的核心是：用占位符（如空src、data-src属性）代替真实图片路径，等图片进入视口时再把data-src的值赋给src，触发浏览器加载。
使用原生 loading="lazy" 属性（最简单）
现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+）支持原生懒加载，只需在img标签中添加loading="lazy"：
- 浏览器自动监听滚动和视口变化，仅当图片接近可视区域时才开始下载
- 无需JavaScript，兼容性好且性能最优
- 适用于大部分常规图片，但不支持IE和旧版Safari
示例：<img src="placeholder.jpg" loading="lazy" alt="描述">（注意：此时src可保留占位图，或直接写成src=""，但建议保留有效占位图避免布局抖动）
用 Intersection Observer API 手动控制（兼容性更强）
当需要支持老浏览器或自定义加载逻辑（如加淡入动画、错误降级）时，推荐用Intersection Observer：
- 监听元素是否进入视口，触发回调后替换src = img.dataset.src
- 比监听scroll事件更高效，不频繁触发，无性能卡顿
- 需为图片统一设置data-src存放真实地址，src可指向小尺寸占位图或透明gif
基础代码示例：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded'); // 可选：用于CSS过渡
observer.unobserve(img); // 加载完即停止观察
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
降级处理与注意事项
懒加载不是“万能保险”，要注意几个关键点：
- 必须设置宽高（或通过CSS aspect-ratio）防止页面滚动时布局跳动
- 对SEO友好：搜索引擎仍会抓取data-src，但建议同时保留有意义的alt和decoding="async"
- 移动端慎用background-image懒加载——它不支持loading="lazy"，需用JS+Intersection Observer手动实现
- 首屏图片建议不用懒加载，避免白屏；可用fetchpriority="high"提示浏览器优先加载
配合CSS提升体验
光替换src还不够，视觉反馈很重要：
- 给img加transition: opacity .3s，加载完成后再移除透明度（通过JS加类）
- 用background-color或伪元素设置占位色/骨架图，避免纯白闪烁
- 加载失败时回退显示占位图并记录错误：
img.onerror = () => img.src = 'fallback.jpg';
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
