图片渐显需同时处理缓存监听、尺寸声明和CSS新特性兼容性：初始设opacity:0并配transition，用JS监听load/error事件或现代浏览器用:has(img:loaded)，且必须声明width/height防布局抖动。
图片加载完成前先隐藏，避免闪跳
浏览器默认会边加载边渲染图片，未加载完时占位空白或拉伸变形，一加载完就突然“啪”一下出现，用户体验割裂。核心思路是：初始设为 opacity: 0 + transition，等 load 事件触发后再加类切换透明度。
常见错误现象：
– 直接对 <img> 写 opacity: 0 但没配 transition，加载完手动改 opacity: 1 仍无动画
– 用 visibility: hidden 替代 opacity，结果过渡失效（visibility 不支持过渡）
– 忘记处理加载失败的情况，error 事件没监听，图片挂了就一直黑屏
实操建议：
– 给图片默认加一个类如 fade-in-img，CSS 中定义 opacity: 0; transition: opacity 0.3s ease;
– JS 监听 load 事件，成功后添加 loaded 类（对应 opacity: 1）
– 同时监听 error，失败时也加 loaded 类或 fallback 样式，避免无限等待
纯 CSS 方案：用 loading="lazy" 配合 :has()（仅现代浏览器）
Chrome 121+、Safari 17.4+ 支持 :has()，可以检测图片是否加载完成。虽然不依赖 JS，但兼容性差，目前只适合渐进增强场景。
立即学习“前端免费学习笔记（深入）”；
使用场景：
– 内部管理后台、可控环境下的新项目
– 不想引入 JS 逻辑，且能接受 Safari/Chrome 最新版以外用户无动画
参数差异：
– loading="eager" 会绕过懒加载，让 :has(img:loaded) 更快匹配
– 若用 loading="lazy"，需等进入视口才触发加载，:has() 匹配也会延迟
示例 CSS：
.fade-img { opacity: 0; transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }<br>.fade-img:has(:is(img:loaded)) { opacity: 1; }
JS 加载监听必须处理缓存命中情况
图片从内存或磁盘缓存中秒出时，load 事件可能在 DOM 解析完成前就已触发，导致 JS 绑定监听太晚，动画永远不执行。
容易踩的坑：
– 只在 DOMContentLoaded 后批量绑定 load，错过缓存图片
– 用 img.complete 判断是否已加载，但没立刻应用动画类
实操建议：
– 对每个 <img> 创建即检查 img.complete === true
– 若为 true，直接加 loaded 类；否则再监听 load
– 不要依赖全局 window.onload，它等所有资源（含 CSS/JS）完成，太晚
简短示例：
document.querySelectorAll('img.fade-in-img').forEach(img => {<br> if (img.complete) {<br> img.classList.add('loaded');<br> } else {<br> img.addEventListener('load', () => img.classList.add('loaded'));<br> img.addEventListener('error', () => img.classList.add('loaded'));<br> }<br>});
过渡性能与图像解码开销
单纯加 opacity 过渡不会触发重排（reflow），但若图片宽高未设，加载后尺寸变化会引发布局抖动，抵消渐显效果。
性能影响：
– 没设 width/height 的图片，加载后重绘范围更大，opacity 动画可能卡顿
– 在低端设备上，大量图片同时渐显可能堆积合成层，造成掉帧
实操建议：
– 所有 <img> 必须声明 width 和 height 属性（可配合 aspect-ratio 做响应式）
– 避免对父容器用 transform: scale() 等触发全图重绘的操作
– 超过 10 张图批量入场时，考虑加 stagger 延迟（如每张延后 0.05s），减轻帧压力
:has() 这类新特性的落地水位——漏掉任意一个，用户看到的就不是淡入，而是卡顿、闪跳或者干脆没反应。 
