求助：Svelte模态框切换图片时短暂显示旧图片的问题

这个问题的核心是新图片加载需要时间，而模态框内的旧图片DOM没有及时被清空或替换，导致新图就绪前旧图依然可见。以下是几个无需预加载所有原图的可行方案：

方案1：先加载新图，再更新模态框内容 #

手动创建Image对象预加载目标图片，等加载完成后再替换模态框内的图片，同时在加载过程中显示占位符：

<script>
  let dialog;
  let selectedImg = null;
  let isLoading = false;

  function openModal(fullSrc) {
    isLoading = true;
    selectedImg = null;
    
    // 手动加载图片，确保加载完成后再显示
    const img = new Image();
    img.src = fullSrc;
    img.onload = () => {
      selectedImg = fullSrc;
      isLoading = false;
      dialog.showModal();
    };
    // 可选：处理加载失败的情况
    img.onerror = () => {
      isLoading = false;
      alert('图片加载失败');
    };
  }

  function closeModal() {
    dialog.close();
    selectedImg = null; // 关闭时清空图片引用
  }
</script>

<dialog bind:this={dialog}>
  {#if isLoading}
    <div style="padding: 2rem;">加载中...</div>
  {:else if selectedImg}
    <img src={selectedImg} alt="查看大图" style="max-width: 90vw; max-height: 90vh;" />
  {/if}
  <button on:click={closeModal} style="margin-top: 1rem;">关闭</button>
</dialog>

<!-- 缩略图列表示例 -->
<div style="display: flex; gap: 1rem;">
  <img src="/thumb1.jpg" alt="缩略图1" on:click={() => openModal("/full1.jpg")} style="width: 100px; height: 100px; object-fit: cover;" />
  <img src="/thumb2.jpg" alt="缩略图2" on:click={() => openModal("/full2.jpg")} style="width: 100px; height: 100px; object-fit: cover;" />
</div>

方案2：关闭模态框时彻底销毁图片元素 #

利用dialog的close事件，在模态框关闭时主动移除图片容器内的所有子元素，避免下次打开时复用旧DOM：

<script>
  let dialog;
  let imgContainer;

  function openModal(fullSrc) {
    // 先清空容器
    while (imgContainer.firstChild) {
      imgContainer.removeChild(imgContainer.firstChild);
    }
    // 创建新图片元素插入容器
    const img = document.createElement('img');
    img.src = fullSrc;
    img.style.maxWidth = '90vw';
    img.style.maxHeight = '90vh';
    imgContainer.appendChild(img);
    
    dialog.showModal();
  }

  function handleClose() {
    // 关闭时彻底清空图片容器
    while (imgContainer.firstChild) {
      imgContainer.removeChild(imgContainer.firstChild);
    }
  }
</script>

<dialog bind:this={dialog} on:close={handleClose}>
  <div bind:this={imgContainer}></div>
  <button on:click={() => dialog.close()} style="margin-top: 1rem;">关闭</button>
</dialog>

<!-- 缩略图列表 -->
<div style="display: flex; gap: 1rem;">
  <img src="/thumb1.jpg" alt="缩略图1" on:click={() => openModal("/full1.jpg")} style="width: 100px; height: 100px; object-fit: cover;" />
  <img src="/thumb2.jpg" alt="缩略图2" on:click={() => openModal("/full2.jpg")} style="width: 100px; height: 100px; object-fit: cover;" />
</div>

方案3：用CSS过渡隐藏旧图，配合加载状态 #

通过给图片元素添加加载状态类，在新图加载过程中隐藏旧图，同时显示加载提示：

<script>
  let dialog;
  let selectedImg = null;
  let isLoading = false;

  async function openModal(fullSrc) {
    isLoading = true;
    selectedImg = null;
    
    // 等待图片加载完成
    await new Promise((resolve, reject) => {
      const img = new Image();
      img.src = fullSrc;
      img.onload = resolve;
      img.onerror = reject;
    });
    
    selectedImg = fullSrc;
    isLoading = false;
    dialog.showModal();
  }

  function closeModal() {
    dialog.close();
    selectedImg = null;
  }
</script>

<style>
  .modal-img {
    transition: opacity 0.3s ease;
    max-width: 90vw;
    max-height: 90vh;
  }
  .loading .modal-img {
    opacity: 0;
  }
  .loading-tip {
    padding: 2rem;
    text-align: center;
  }
</style>

<dialog bind:this={dialog} class:loading={isLoading}>
  {#if selectedImg}
    <img src={selectedImg} alt="大图" class="modal-img" />
  {/if}
  {#if isLoading}
    <div class="loading-tip">加载中...</div>
  {/if}
  <button on:click={closeModal} style="margin-top: 1rem;">关闭</button>
</dialog>

<!-- 缩略图列表 -->
<div style="display: flex; gap: 1rem;">
  <img src="/thumb1.jpg" alt="缩略图1" on:click={() => openModal("/full1.jpg")} style="width: 100px; height: 100px; object-fit: cover;" />
  <img src="/thumb2.jpg" alt="缩略图2" on:click={() => openModal("/full2.jpg")} style="width: 100px; height: 100px; object-fit: cover;" />
</div>

为什么之前的方法无效？ #

• 直接调用HTMLElement.remove()可能时机不对：如果是在关闭模态框后执行，下次打开时新图还没加载，模态框内的旧图DOM可能因为Svelte的DOM复用机制被保留，导致短暂显示。
• 调整过渡延迟只是推迟了显示时间，但没有解决新图加载完成前的旧图残留问题。

内容的提问来源于stack exchange，提问作者jylesy