在使用 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={thumb.thumbnailUrl} alt="Thumbnail" /> </button> {/each} <!-- 模态框 --> <dialog bind:open={showModal} on:close={closeModal}> <div class="modal-content"> {#if selectedImage} <img src={selectedImage} 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 体积，以最小干预达成最大效果——它提醒我们：现代前端框架的“响应式”威力，既来自自动更新，也依赖开发者对状态生命周期的精准掌控。