在 Svelte 中使用 实现图片预览模态框时，若未及时清空图像源，用户切换图片会短暂闪现上一张已加载的图像；本文提供简洁可靠的响应式解决方案——关闭模态框时重置图像绑定状态。
在 svelte 中使用 `
当构建基于 dialog 元素的轻量级图片预览模态框时，一个常见但易被忽视的视觉问题浮现：用户点击新缩略图后，模态框先闪现出上一次打开的完整图像，再加载当前目标图像。这种“图像残留”并非缓存错误，而是由于 Svelte 的响应式绑定机制保留了 selectedImage 的旧值，而 在新 src 加载完成前仍渲染原内容——尤其在大图（500KB–1MB）场景下，网络延迟放大了该闪烁感。
根本原因在于：模态框关闭（showModal = false）本身不自动清空图像状态； 元素在 src 更新前仍持有并显示上一个有效 URL，浏览器甚至可能复用其解码后的位图帧。
✅ 正确解法是 在模态框关闭时主动重置图像源变量，确保下次打开前 selectedImage 为空字符串（或 null），从而让 进入“无源”状态（不渲染任何图像），避免残留：
<script>
let selectedImage = '';
let showModal = false;
// 关键修复：响应式重置 —— 当模态框关闭时，清空图像源
$: if (!showModal) selectedImage = '';
function openModal(src) {
selectedImage = src;
showModal = true;
}
function closeModal() {
showModal = false;
// 注意：无需手动设 selectedImage = '' —— 响应式语句已接管
}
</script>
<!-- 触发区域（如缩略图列表） -->
{#each thumbnails as thumb}
<img
src={thumb.thumbnail}
alt="Thumbnail"
on:click={() => openModal(thumb.full)}
class="thumbnail"
/>
{/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"
loading="lazy"
// 可选：添加淡入过渡提升体验
class="fade-in"
/>
{:else}
<div class="placeholder">Loading...</div>
{/if}
</div>
</dialog>
<style>
.modal-content { position: relative; }
button { position: absolute; top: 1rem; right: 1rem; }
.fade-in { transition: opacity 0.2s ease-in; }
</style>⚠️ 注意事项：
- 不要依赖 on:close 回调内手动赋值（如 selectedImage = ''），因为 dialog 的 close 事件可能在 DOM 更新前触发，导致竞态；响应式声明 $: if (!showModal) selectedImage = '' 是更健壮的选择，它在每次 showModal 变化后同步执行。
- 若需更强控制（如防止快速连续点击），可增加防抖逻辑或禁用按钮，但本方案已覆盖绝大多数场景。
- 避免预加载所有大图（如通过 注入 ），这违背按需加载原则，增加首屏负载和带宽浪费。
总结：Svelte 的响应式系统是双刃剑——它简化状态同步，但也要求开发者显式管理“无效态”。通过将图像源与模态框可见性解耦，并利用响应式语句自动清理，即可彻底消除图像闪现问题，兼顾性能、可维护性与用户体验。
