图片懒加载通过用data-src替代src、设置宽高防CLS、优先使用Intersection Observer及CSS过渡动画，从源头减负并提升首屏性能与滚动流畅度。
图片懒加载能直接减少首屏资源请求数，避免大量图片解码、布局重排和内存占用集中发生，从而让页面初始滚动更顺滑。关键不在“加功能”，而在“减负担”——不让浏览器一打开就拼命拉图。
用 data-src 替代 src，从源头阻止默认加载
浏览器只要看到 src 属性，不管图片是否在视口内，都会立刻发起请求。懒加载的第一步就是切断这个自动行为：
- HTML 中把真实地址写进
data-src，src只放占位图（如 1×1 透明 GIF 或 base64 灰色背景）或留空 - 务必设置
width和height属性，防止图片加载后突然撑开导致布局偏移（CLS） - 示例：
<img class="lazy" src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=" width="300" height="200" alt="描述">
优先用 Intersection Observer，别卡主线程
老式方案靠监听 scroll 事件 + getBoundingClientRect()，频繁触发、计算密集，容易引发掉帧。现代做法交给浏览器原生的 IntersectionObserver：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 它在独立线程运行，不阻塞渲染和用户交互
- 支持配置
rootMargin（比如提前 200px 开始加载），让图片在进入视口前就准备就绪，滚动时无白屏感 - 加载完成立即调用
unobserve()，避免重复处理同一张图
配合 CSS 实现视觉平滑过渡
图片加载有延迟，用户会感知到“突然出现”。加上简单动画可掩盖等待过程，提升主观流畅度：
立即学习“Java免费学习笔记（深入）”；
- 初始状态设
opacity: 0、transition: opacity 0.2s ease - 图片加载成功后加
loaded类名，触发opacity: 1 - 可选：搭配
transform: scale(0.98)初始缩放，加载后还原，增强入场感
移动端需额外注意滚动行为差异
iOS Safari 和部分安卓 WebView 的滚动惯性更强，且 scroll 事件触发频率低、不连续。纯 scroll 监听容易漏判或滞后：
- Intersection Observer 在所有现代移动端浏览器中均已稳定支持，是首选
- 若必须降级（如兼容 Android 4.x），需加节流（throttle）+ 缓存元素位置，避免每帧都调用
getBoundingClientRect() - 慎用
loading="lazy"：虽是原生属性，但对自定义占位图、加载状态控制、错误回退等场景支持弱，生产环境建议手写逻辑
