直接改src属性会触发浏览器立即卸载旧资源并异步加载新资源，造成渲染空档期而白屏；根源在于旧图解绑后、新图onload前dom无内容可渲染，尤其未设宽高时还会引发布局偏移。
直接改 src 属性（比如 img.src = newUrl 或 iframe.src = url）会触发浏览器立即卸载旧资源、加载新资源，期间元素空白或回退到默认占位态——这就是闪烁的根源。它不是 CSS 能盖住的问题，而是渲染管线里的“资源切换空档”。
为什么 img.src 动态赋值会白屏
浏览器对 <img> 的 src 修改是同步销毁+异步加载：旧图片解绑瞬间 DOM 中就没了图像数据，而新图 onload 之前没有任何内容可渲染，<img> 退化为无尺寸/无背景的空盒。尤其在本地 file:// 或低网速下，这个空档更长、更刺眼。
- 不设
width/height属性时，空白期还会引发下方内容上跳（CLS） - 用
background-image替换时，CSS 渲染时机和图片加载不同步，也可能闪一下 - Chrome 对
src重置的缓存策略比 Firefox 更激进，有时加时间戳都不管用
iframe.src 切换时整块区域闪退怎么办
和 <img> 类似，但更严重：iframe 卸载会清空整个子文档上下文，包括 JS 执行栈、滚动位置、表单状态。即使只是换一个本地 .txt 文件，也会看到明显的“清屏→加载中→内容出现”三段式闪烁。
- 必须加防缓存参数，但仅用
url.searchParams.set('t', Date.now())不够稳定；Firefox 在file://下可能忽略查询字符串变化 - 不要用
iframe.contentDocument.write()替代 src 切换——它不触发完整生命周期，容易残留样式或事件监听器 - 如果目标是文本文件，优先考虑用
fetch()+textContent更新容器，而非 iframe
真正稳的替换方案：预加载 + 原地切换
核心思路是：新资源加载完成后再动 DOM，避免“空档”。不靠 CSS 隐藏（那只是掩盖问题），而是把资源准备和视觉切换解耦。
- 对图片：用
new Image()预加载，监听onload后再赋值img.src；失败时 fallback 到备用图或占位色块 - 对 iframe：先用
fetch(url)拉取文本内容，成功后直接写入iframe.contentDocument.body.innerHTML（需同源）；或改用<div id="log-viewer"></div>+textContent更新 - 对视频 poster 闪烁：移除
poster属性，用background-image+background-size: cover占位，视频onloadeddata触发后移除背景
最易被忽略的是：预加载失败时没降级处理，导致页面卡在空白态；或者在 onload 回调里又触发了 layout thrashing（比如反复读 offsetHeight）。真正的“不闪”，靠的是资源确定就绪 + DOM 更新原子化，而不是更快地重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
