CSS如何实现响应式图片懒加载动画_结合CSS关键帧与占位符技术

应使用 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，结果图片加载完成前动画就播完了，或者动画反复触发。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西