用 linear-gradient 替代空 src 做图片占位可避免空白闪；推荐 45deg 细网格渐变配 background-size: 20px 20px；动画用 opacity 脉冲而非 transform；懒加载图片需 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-loadingclass 并启动动画 - 不要在
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 更快定位错位根源
