图片淡入需监听自身load事件而非页面ready，用loaded类触发动画；须设宽高防布局抖动，慢网时可用骨架屏或LQIP占位。
图片在页面加载时淡入，关键不是等整个页面 ready 才动，而是等图片资源本身加载完成再触发。直接给 <img> 加 opacity: 0 然后 JS 一加载就切 opacity: 1，会导致图片还没下载完就“淡入空白框”，体验反而更差。
让图片自己决定什么时候淡入
监听每张图片的 load 事件，成功或失败都视为“可显示”，此时添加 loaded 类启动过渡：
- HTML 中为需要淡入的图片加统一类名，比如
class="fade-in-img" - CSS 定义初始状态和过渡：
<style>
.fade-in-img {
opacity: 0;
transition: opacity 0.4s ease-out;
}
.fade-in-img.loaded {
opacity: 1;
}
</style> - JS 放在
</body>前，处理已加载（complete）和后续加载的图片：
document.querySelectorAll('.fade-in-img').forEach(img => {
if (img.complete) {
img.classList.add('loaded');
} else {
img.addEventListener('load', () => img.classList.add('loaded'));
img.addEventListener('error', () => img.classList.add('loaded'));
}
});
避免加载前的空白或跳动
纯透明切换还不够——如果图片尺寸未定，淡入过程中可能突然撑开布局，造成抖动。建议配合以下措施：
- 给
<img>显式设置width和height（或用aspect-ratio），预留空间 - 容器加
overflow: hidden防止内容溢出干扰 - 若使用 Web 字体渲染图中文字，务必在
@font-face中启用font-display: swap，防止字体加载导致二次重排
进阶：加载中先显示占位效果
网络慢时，用户需要视觉反馈。可用 CSS 背景动画模拟加载态：
立即学习“前端免费学习笔记（深入）”；
- 为图片容器（如
<div class="img-wrapper">）设置渐变背景 + 骨架动画 - 图片加载完成后，移除容器的加载类，并让图片自身淡入
- 更优方案是搭配 LQIP（低质量图像占位符）：先加载极小模糊图作为
src，高清图通过data-src异步加载，替换后再加loaded类
