应使用 aspect-ratio 预留图片空间并配合 object-fit，用伪元素实现加载动画，通过 intersectionobserver 预加载后触发动画，兼容旧版 safari 需降级为 padding-top 占位。
图片加载前如何避免布局抖动
响应式图片懒加载时最常遇到的不是动画卡顿，而是图片一出现就“把下面内容往下顶”，用户正在读文字，突然页面跳一下。根本原因是没给图片预留空间。
解决思路是用 aspect-ratio 配合 object-fit，让容器在图片加载前就撑开正确比例：
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9; /* 比如宽屏图 */
object-fit: cover;
background-color: #f5f5f5;
}
- 必须写
aspect-ratio，不能只靠父容器设高——否则响应式断点切换时比例会失效 -
background-color是占位符底色，比用透明 GIF 或 SVG 更轻量、更可控 - 如果后端返回的图比例不固定，得用 JS 读取原始宽高再动态设
style="--aspect-ratio: X/Y"，纯 CSS 无法应对这种场景
如何用 CSS 关键帧做“淡入+缩放”加载动画
直接对 img 元素加 opacity 和 transform 动画不行——浏览器加载完成前，img 的自然尺寸是 0×0，动画会从一个极小点开始放大，视觉突兀。
正确做法是用伪元素盖一层“加载态”，等图片就绪再切到真实图层：
img {
opacity: 0;
transition: opacity 0.3s ease;
}
img.loaded {
opacity: 1;
}
img::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
background-size: 20px 20px;
animation: loading 1.2s infinite;
}
@keyframes loading {
0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
100% { background-position: 20px 0, 20px 10px, 30px -10px, 10px 0; }
}
-
img::before只在未加载时显示，JS 检测到load事件后加loaded类，触发淡入 - 动画用
background-position而非transform，避免重排，性能更稳 - 别用
visibility: hidden替代opacity: 0——它会让元素脱离渲染流，导致父容器高度塌陷
IntersectionObserver + CSS 动画如何协同触发
懒加载的核心是监听进入视口，但很多人直接在 observer 回调里改 src，结果图片加载完成前动画就播完了，或者动画反复触发。
关键在于分离“触发时机”和“动画时机”：
- 监听到进入视口 → 立即设置
data-src并创建Image实例预加载 -
Image.onload触发后 → 才给img加loaded类，启动 CSS 动画 - 务必加
observer.unobserve(img)，否则同一张图可能被重复加载（比如滚动来回）
示例关键逻辑：
const img = document.querySelector('img');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
const src = img.dataset.src;
const preload = new Image();
preload.onload = () => img.classList.add('loaded');
preload.src = src;
observer.unobserve(img);
}
});
移动端 Safari 对 aspect-ratio 和 will-change 的兼容性坑
iOS 15.4 之前不支持 aspect-ratio，而 will-change: opacity 在旧版 Safari 上反而会导致动画卡顿甚至白屏。
- 降级方案：用 padding-top 百分比占位（需配合绝对定位），或用 JS 注入
style="height: calc(100vw * 0.5625)" - 别给
img加will-change——现代浏览器已足够智能，强行提示反而干扰优化 - 动画时间别低于 0.2s，iOS WebKit 对超短过渡有渲染延迟，看起来像没动
真正难的不是写出动画，而是让每张图在各种设备、各种网络条件下，都以“刚好够快、刚好不跳、刚好不闪”的方式出现。细节全在加载时机判断和容器尺寸控制里，而不是 keyframes 写得多炫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
