在 Svelte 中使用 实现图片预览模态框时，若未及时清空图像源，用户切换图片会短暂看到上一张图片——本文提供简洁可靠的响应式解决方案：关闭模态框时重置图像绑定状态。
在 svelte 中使用 `
当使用 Svelte 构建基于原生
根本原因在于：模态框的显隐（showModal）与图片数据（selectedImage）解耦。即使模态框已关闭，selectedImage 仍保留上一次选中的 URL；当再次打开时，DOM 立即渲染该旧 URL 的 ，触发浏览器加载（或复用缓存），直到新 src 赋值才更新——这中间的空档即为“闪现”。
✅ 正确解法是 在模态框关闭时主动重置图像状态，确保每次打开都从干净状态开始：
<script>
let selectedImage = '';
let showModal = false;
// 关键修复：当模态框关闭时，立即清空 selectedImage
$: if (!showModal) selectedImage = '';
</script>
<!-- 触发按钮 -->
{#each thumbnails as thumb}
<button on:click={() => {
selectedImage = thumb.fullUrl;
showModal = true;
}}>
<img src={thumb.thumbnailUrl} alt="Thumbnail" />
</button>
{/each}
<!-- 模态框 -->
<dialog open={showModal} on:close={() => showModal = false}>
<div class="modal-content">
<button on:click={() => showModal = false}>✕</button>
{#if selectedImage}
<img src={selectedImage} alt="Full size"
on:load={() => console.log('Image loaded')}
on:error={() => console.warn('Failed to load image')} />
{:else}
<p>Loading...</p>
{/if}
</div>
</dialog>? 关键设计要点说明：
- 使用 $: 响应式语句监听 showModal 变化，比手动在 on:close 中赋值更健壮（避免因事件未触发或异步延迟导致遗漏）；
- 不依赖 DOM 操作（如 remove() 或 innerHTML = ''），不破坏 Svelte 的声明式更新逻辑；
- 无需预加载所有大图（违背按需加载原则），也不需复杂过渡延迟 hack；
- 若需增强用户体验，可配合 loading="lazy"（仅适用于视口内图片）或骨架占位符（在 {#if selectedImage} 分支中添加 loading 状态 UI）。
⚠️ 注意事项：
- 确保 selectedImage 是顶层 let 声明变量（非 const 或函数作用域内），否则响应式语句无法追踪；
- 避免在 on:close 回调中直接写 selectedImage = '' —— 若用户通过 Esc 键或点击遮罩关闭，该回调可能不执行，导致状态残留；
- 若模态框含动画（如 fade-in/out），建议将 selectedImage 重置逻辑置于 showModal 变为 false 的第一时间（即上述 $: 方案），而非动画结束之后。
这一方案轻量、可靠、符合 Svelte 响应式哲学：状态驱动视图，而非视图反向操纵状态。只需一行响应式逻辑，即可彻底消除图片闪现，兼顾性能与体验。
