图片懒加载的核心是按需加载，即图片进入视口时才通过data-src属性由JavaScript赋值给src发起请求，避免初始加载阻塞；现代实现推荐使用IntersectionObserver监听，配合dataset.src读取并设置真实地址，同时注意命名规范、路径有效性及布局稳定性。
图片懒加载的核心是“按需加载”，即当图片进入视口（viewport）时才发起请求，避免页面初始加载大量图片拖慢性能。data- 属性（如 data-src）正是实现这一机制的关键载体——它让图片的真正地址暂不写在 src 中，而是先存于自定义属性里，由 JavaScript 控制何时读取并赋值。
为什么用 data-src 而不是直接写 src
浏览器在解析 HTML 时，只要遇到 <img src="xxx"> 就会立即发起网络请求。如果页面有几十张首屏外的图片，全写死 src，不仅浪费带宽，还会阻塞主线程、拉长 LCP（最大内容绘制）时间。
用 data-src 可以“骗过”浏览器：HTML 里写成
此时浏览器不会加载图片，直到 JS 主动读取 data-src 并赋给 src。
基础懒加载实现（原生 JS + Intersection Observer）
现代推荐用 IntersectionObserver 监听元素是否进入视口，比频繁监听 scroll 更高效、更精准。
立即学习“Java免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 给所有待懒加载图片加
class="lazy"和data-src属性 - 创建观察器，监听这些图片是否出现在视口内
- 一旦触发，把
dataset.src赋给img.src，再移除lazy类防止重复加载 - 可选：加载失败时显示占位图或错误提示
示例代码：
const lazyImages = document.querySelectorAll('img.lazy');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); // 停止观察已加载的图片
}
});
});
lazyImages.forEach(img => observer.observe(img));
dataset 的使用细节和注意事项
img.dataset.src 等价于 img.getAttribute('data-src')，但更简洁。注意以下几点：
- HTML 中写
data-src，JS 中访问用dataset.src（驼峰命名：连字符后字母大写，如data-src-set→dataset.srcSet） - 确保
data-src是有效 URL，相对路径需相对于当前页面，不是相对于 JS 文件 - 建议同时设置
width/height或使用aspect-ratio防止布局偏移（CLS） - 若需响应式图片，可用
data-srcset+data-sizes，加载时再同步赋值给srcset和sizes
兼容性兜底与增强体验
对于不支持 IntersectionObserver 的老浏览器（如 IE），可降级为 scroll + getBoundingClientRect 判断；但更推荐用 官方 polyfill。
增强体验方面：
- 加载中显示骨架屏或模糊占位图（通过
data-src-placeholder） - 图片加载完成后再淡入（监听
load事件，加 CSS transition） - 对即将进入视口的图片预加载（设置
rootMargin扩大观察区域，如'100px'）
基本上就这些。用好 data- 属性 + IntersectionObserver，就能写出轻量、可靠、符合现代 Web 性能规范的懒加载逻辑。
