在使用 Svelte 的 实现图片查看模态框时，若未及时清空图像源，用户切换图片会短暂闪现上一张图片——本文提供简洁可靠的响应式解决方案：关闭模态框时重置图像状态，彻底消除视觉残留。
在使用 svelte 的 `
当构建基于 dialog 元素的轻量级图片预览组件时，一个常见但易被忽视的视觉问题浮现：用户点击新缩略图后，模态框内先“闪现”上一张已加载的完整图像，约数百毫秒后才替换成目标图片。这并非浏览器缓存或网络延迟导致，而是组件状态管理不严谨所致—— 绑定的变量在模态框关闭后仍保留旧值，导致新打开时 DOM 瞬间渲染旧 src，随后才被新值更新。
根本原因在于：Svelte 的响应式赋值（如 selectedImage = newSrc）是异步触发更新的，而 元素对 src 变更的反应是立即的；若 selectedImage 在关闭模态框时未被清空，它便成为下一次打开时的“初始值”，造成视觉残留。
✅ 正确解法是：在模态框关闭时主动将 selectedImage 重置为空字符串（或其他 falsy 值），确保每次打开前图像源处于干净状态：
<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="%7Bthumb.thumbnailUrl%7D" alt="Thumbnail"></button>
{/each}
<!-- 模态框 -->
<dialog bind:open="{showModal}" on:close="{closeModal}"><div class="modal-content">
{#if selectedImage}
<img src="%7BselectedImage%7D" alt="Full-size preview" on:load="{()"> console.log('Image loaded')}
on:error={() => console.warn('Failed to load image')}
/>
{:else}
<div class="placeholder">Loading...</div>
{/if}
</div>
<button on:click="{closeModal}">✕</button>
</dialog>
? 进阶建议与注意事项：
- 不要依赖 HTMLElement.remove() 或 CSS 过渡延迟来掩盖问题——这是治标不治本，且可能引发内存泄漏或事件绑定异常；
- 若需更高体验，可配合 loading="lazy"（仅适用于非首屏）或 decode() API 实现加载完成后再显示，但本场景中状态重置已足够；
- 避免在 on:close 中直接赋值 selectedImage = ''（因 bind:open 触发时机可能早于 on:close），推荐使用 $: 响应式语句，确保逻辑与 showModal 状态严格同步；
- 对于服务端渲染（SSR）项目，请确保 selectedImage 初始值为 '' 而非 undefined，防止 hydration 差异。
该方案零依赖、无额外请求、不增加 bundle 体积，以最小干预达成最大效果——它提醒我们：现代前端框架的“响应式”威力，既来自自动更新，也依赖开发者对状态生命周期的精准掌控。
