CSS图片占位符：渐变闪烁加载效果

本文深入探讨了如何用纯CSS实现高效、流畅的图片加载占位符，重点解决传统空src或低效GIF占位导致的“空白闪”和视觉跳动问题；通过精心设计的45度细网格渐变背景、轻量级opacity脉冲动画、IntersectionObserver精准控制懒加载动画启停，以及针对object-fit与背景尺寸错位的实战调试方案，提供了一套兼顾性能、兼容性与用户体验的现代占位策略——不追求炫酷效果，而专注消除加载过程中的每一处干扰，让图片浮现自然如呼吸。

图片占位符用 background-image 渐变替代 src 空白时闪一下的问题

直接用 background-image: linear-gradient(...) 做占位，比留空 src 或塞个 1px GIF 更稳——浏览器不会因图片加载失败或延迟而触发重排或“空白闪”。关键不是“好看”，是避免视觉跳动。

常见错误是把渐变写成 background: #f0f0f0 单色，结果真实图片加载后颜色对比太强，“啪”一下跳；或者用 background: url(data:image/svg+xml,...) 引入 SVG，但 base64 过长、解析慢，反而拖慢首屏。

• 推荐用纯 CSS 渐变：background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%), linear-gradient(-45deg, #f2f2f2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f2f2f2 75%), linear-gradient(-45deg, transparent 75%, #f2f2f2 75%)，再配 background-size: 20px 20px 模拟细网格，视觉上更“有内容”
• 别在 :hover 或 @media 里动态切渐变——CSS 重绘开销小，但 JS 控制 class 切换会多一层事件响应延迟
• 如果项目要兼容 IE11，linear-gradient 需加 -ms- 前缀，且不能用透明度写法（如 rgba(242,242,242,0.3)），IE11 不认，得用 filter: progid:DXImageTransform.Microsoft.gradient(...) 回退，但代价高，建议直接放弃 IE11 占位动画

让占位符“闪烁”靠 animation + opacity，不是靠 JS 轮询

所谓“闪烁”，其实是用 CSS 动画微调透明度，制造加载中的呼吸感。JS 监听 img.onload 再移除 class 完全够用，没必要用 MutationObserver 盯 DOM 变化，徒增复杂度。

容易踩的坑是动画时间设太短（0.3s）或太长（3s）：前者像卡顿，后者让用户误以为卡死；还有人用 transform: scale() 动画，结果触发 layout，滚动时掉帧。

• 推荐动画定义：@keyframes placeholder-pulse { 0% { opacity: 0.6; } 50% { opacity: 0.85; } 100% { opacity: 0.6; } }，配合 animation: placeholder-pulse 1.8s ease-in-out infinite
• 必须加 will-change: opacity（或至少 backface-visibility: hidden），否则部分安卓 WebView 下 opacity 动画会糊、掉帧
• 一旦图片加载完成，立刻用 img.addEventListener('load', () => el.classList.remove('is-loading')) 移除动画 class，别等 CSS 自然过渡结束——用户感知到图出来了，动画就该停

loading="lazy" 和占位符动画共存时，滚动进视口前别触发动画

如果图片带 loading="lazy"，但页面一打开就给所有 .img-placeholder 加动画 class，那些还没被浏览器准备加载的图片，会在后台默默跑动画，浪费 CPU，还可能在 Safari 上导致 requestIdleCallback 失效。

正确做法是：只对已进入懒加载检测范围（或已显式调用 img.loading = 'eager'）的图片启用动画；未进入的，保持静态占位。

• 监听 IntersectionObserver，当 isIntersecting === true 时，再添加 is-loading class 并启动动画
• 不要在 img 标签上直接写 style="animation: ..." ——这样无法用 JS 精确控制启停，也难做 SSR 服务端不执行动画的判断
• 若用 React/Vue，注意组件卸载时清理 IntersectionObserver.unobserve()，否则内存泄漏，占位符动画还在后台跑

真实项目里，object-fit 和渐变占位的尺寸错位问题

当 img 设了 object-fit: cover 但容器宽高比和原图不一致时，渐变背景会拉伸变形，网格线歪斜，看起来像 bug。这不是动画问题，是 background-size 和容器渲染逻辑没对齐。

最简解法不是改渐变，而是让背景“不随容器拉伸”：用 background-attachment: local 或更稳妥的 background-size: contain + background-repeat: no-repeat，但前提是容器有明确宽高（不能是 height: auto）。

• 如果容器高度由内容撑开（比如图文混排），优先用 aspect-ratio（现代浏览器）或 padding-bottom 百分比 hack 锁定宽高比，再设 background-size: cover
• 慎用 background-origin: content-box ——它会让渐变从内边距内开始画，在某些 flex 布局下偏移不可控
• 调试时临时加 outline: 1px solid red 看容器实际渲染区域，比盯着 DevTools 的 computed styles 更快定位错位根源

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS图片占位符：渐变闪烁加载效果》文章吧，也可关注golang学习网公众号了解相关技术文章。