正确做法是将占位色抽为CSS变量并用@media响应深色模式，JS加类需用setTimeout或requestAnimationFrame触发transition，避免background-image或!important干扰。
图片懒加载时占位符颜色怎么动态控制
直接用 background-color 写死色值，后续换主题或适配深色模式就得改多处 CSS —— 正确做法是把占位色抽成 CSS 变量，配合 transition 实现渐变过渡。
- 定义变量如
--placeholder-bg: #f0f0f0，在:root或组件作用域内声明 - 图片容器初始样式设为
background-color: var(--placeholder-bg)，同时加transition: background-color 0.3s ease - 图片加载完成时，JS 给容器加类（如
.loaded），该类里将background-color设为transparent或继承父背景 - 别漏写
will-change: background-color（可选），避免部分浏览器重绘卡顿
为什么 transition 在图片加载后不触发
常见现象：JS 设置了 img.onload 并加了类，但背景没过渡，而是瞬间消失 —— 根本原因是浏览器没触发重排/重绘时机，class 加上后立刻被新样式覆盖，过渡链断了。
- 必须确保「加类」和「触发布局」之间有最小时间差，用
setTimeout(() => { el.classList.add('loaded') }, 0)或requestAnimationFrame包一层 - 如果用
background-image替代background-color做占位，transition对background-image无效，只能靠 opacity 或 visibility 切换 - 检查是否误用了
!important覆盖了变量值，导致var(--placeholder-bg)解析失败，退回到初始色
CSS 变量如何响应深色模式自动切换
不能只靠 JS 监听 prefers-color-scheme 手动切变量 —— 浏览器原生支持通过 @media 动态更新 CSS 变量，更轻量也更可靠。
- 在
:root中定义默认变量：--placeholder-bg: #f5f5f5 - 用
@media (prefers-color-scheme: dark)覆盖：:root { --placeholder-bg: #333 } - 确保图片容器的
background-color始终引用该变量，无需 JS 干预即可响应系统切换 - 注意 Safari 旧版本对
@media内变量更新有延迟，可加color-scheme: light dark到根元素辅助识别
占位符过渡和图片渲染抢资源怎么办
大图加载 + 背景渐变同时发生，低端设备可能出现掉帧或闪烁 —— 过渡不是越快越好，得让浏览器有余力处理图片解码。
立即学习“前端免费学习笔记（深入）”；
- 把
transition-duration控制在0.2s ~ 0.35s之间，超过 0.4s 用户感知延迟，低于 0.15s 易被忽略 - 避免在
transition中混用opacity和background-color，两者触发不同图层合成，增加 GPU 压力 - 如果图片用
loading="lazy"，确保容器有明确宽高（或 aspect-ratio），否则加载前无占位高度，页面会抖动
真正难的是平衡：过渡要足够明显让用户感知加载状态，又不能干扰图片本身的渲染节奏。变量和媒体查询解决了复用问题，但时机控制还得靠 setTimeout 或 requestAnimationFrame 那一下“松手”。
