在使用 Svelte 的 实现图片查看模态框时，若未及时清空图像源，用户切换图片会短暂闪现上一张图片——根本原因是 selectedImage 状态未在模态框关闭时重置。
在使用 svelte 的 `
这是一个典型的状态残留导致的 UI 闪烁问题。当模态框关闭时，selectedImage 仍保留前一次选中的 URL，而新点击触发 showModal = true 后，DOM 中的 会立即渲染旧值（浏览器可能从缓存快速加载），随后才被新图片替换，从而造成“闪图”现象。
✅ 正确解法：关闭时主动清空状态
最简洁、可靠的方式是利用 Svelte 的响应式声明（$:）监听 showModal 状态，在其变为 false 时立即将 selectedImage 重置为空字符串：
<script>
let selectedImage = '';
let showModal = false;
// 关键修复：模态框关闭时清空图像源
$: if (!showModal) selectedImage = '';
</script>
<!-- 触发打开 -->
<button on:click={() => {
selectedImage = '/images/photo-2.jpg';
showModal = true;
}}>查看图片2</button>
<!-- 模态框 -->
<dialog bind:open={showModal}>
<div class="modal-content">
<button on:click={() => showModal = false}>×</button>
{#if selectedImage}
<img src={selectedImage} alt="预览图"
on:load={() => console.log('图片加载完成')}
on:error={() => console.warn('图片加载失败')} />
{/if}
</div>
</dialog>? 注意：{#if selectedImage} 包裹
是重要防护层——它确保 DOM 中仅在有有效 URL 时才渲染
元素，避免空 src 引发意外请求或占位符干扰。
⚠️ 常见误区与替代方案对比
| 方法 | 是否推荐 | 说明 |
|---|---|---|
| 预加载所有大图（如 插入 ） | ❌ 不推荐 | 违背按需加载原则，显著增加首屏资源开销和带宽消耗，尤其在图库较大时不可行。 |
| element.remove() 或手动清空 innerHTML | ❌ 低效且易错 | 绕过 Svelte 响应式系统，破坏声明式逻辑，且无法保证 DOM 清理时机与状态同步。 |
| 使用 transition:fade + delay 掩盖闪烁 | ❌ 治标不治本 | 仅延迟视觉反馈，未解决状态污染本质，网络慢时仍可能暴露问题。 |
? 进阶建议：增强用户体验
-
加载态反馈：在 selectedImage 更新后、图片加载完成前，显示骨架屏或 loading spinner：
{#if selectedImage} <img src={selectedImage} class:loading={!imageLoaded} on:load={() => imageLoaded = true} /> {#if !imageLoaded} <div class="spinner">加载中…</div> {/if} {/if} -
防抖快速连点：若用户频繁点击不同缩略图，可加简单节流防止状态竞争：
let pendingLoad = null; function openImage(url) { if (pendingLoad) clearTimeout(pendingLoad); pendingLoad = setTimeout(() => { selectedImage = url; showModal = true; pendingLoad = null; }, 50); }
总之，保持状态与 UI 严格同步是前端响应式开发的核心原则。通过 $: if (!showModal) selectedImage = '' 这一行轻量级响应式逻辑，即可彻底根除图片闪烁问题，兼顾性能、可维护性与用户体验。
