在使用 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，即可优雅、轻量、可靠地消除视觉闪烁，兼顾性能与用户体验。
