在使用 Svelte 的 实现图片预览模态框时，若未及时清空图像源，用户切换图片会短暂闪现上一张图片——根本原因是 selectedImage 状态未在模态框关闭时重置，导致新打开时 DOM 仍保留旧 src 并触发浏览器缓存渲染。
在使用 svelte 的 `
该问题本质是状态与 UI 生命周期不同步：模态框虽已关闭（showModal = false），但 selectedImage 仍持有上一张图片的 URL。当用户快速点击下一张缩略图时，
立即渲染——此时浏览器可能尚未加载新图，却因缓存或延迟解码，优先展示旧图的残留渲染帧（尤其在大图场景下更明显）。
正确解法：在模态框隐藏时主动清空图像状态
无需预加载所有大图（违背按需加载原则），也不依赖 DOM 操作（如 remove()）或复杂过渡控制。只需利用 Svelte 的响应式声明，确保 selectedImage 在 showModal 为 false 时被置为空字符串：
<script> let selectedImage = ''; let showModal = false; // 关键修复：当模态框关闭时，强制重置图像源 $: if (!showModal) selectedImage =''; function openModal(src) {selectedImage = src; showModal = true;} function closeModal() { showModal = false;} </script> <!-- 缩略图列表 --> {#each thumbnails as thumb} <button on:click={() => openModal(thumb.fullSizeUrl)}> <img src={thumb.thumbnailUrl} alt="Thumbnail" /> </button> {/each} <!-- 模态框 --> <dialog open={showModal} on:close={closeModal}> <div class="modal-content"> <button on:click={closeModal}>✕</button> {#if selectedImage} <img src={selectedImage} alt="Full-size preview" on:load={() => console.log('Image loaded')} on:error={() => console.warn('Failed to load image')} /> {:else} <p>Loading……</p> {/if} </div> </dialog>✅ 为什么这能彻底解决问题？
- selectedImage = ” 触发
的 src 属性更新为空值，浏览器立即清空当前图像内容（而非等待新图加载）；
- 新图加载完成后才重新渲染，完全避免“旧图闪现”；
- 响应式语句 $: if (!showModal) selectedImage = ” 确保状态清理时机精准（模态框关闭瞬间），无需手动调用或副作用处理。
⚠️ 注意事项
- 避免仅在 closeModal() 函数内重置 selectedImage（如 showModal = false; selectedImage = ”），因
- 若需支持键盘关闭（如 Esc 键），确保 on:close 事件处理器已绑定并触发 showModal = false；
- 对于极低网速场景，可配合 loading=”lazy”（不推荐用于模态框内主图）或骨架屏提升体验，但核心仍需状态重置。
总结：状态驱动 UI 是 Svelte 的设计哲学，图像闪现不是 DOM 残留问题，而是状态残留。通过响应式逻辑在生命周期关键点（关闭时）归零 selectedImage，即可优雅、轻量、可靠地消除视觉闪烁，兼顾性能与用户体验。
