Svelte中{#each}循环迭代顺序异常问题

问题场景 #

我正在开发一个展示GIF集合的容器，通过以下Svelte代码根据选中分类动态渲染图片：

{#each imagesByCategory[selectedCategoryIndex] as image (image.Key)}
    <div>
        <ImageElement src="cdn.digitaloceanspaces.com/{image.Key}" />
    </div>
{/each}

初始加载时，图片按01.gif到15.gif的正确顺序从上到下渲染，网络请求顺序也正常。但切换到其他分类后出现异常：

• UI上图片显示顺序依然正确
• 浏览器Network面板中，GIF的请求和加载顺序反向（比如从32.gif到30.gif）
• 打印循环迭代索引发现，切换分类后索引顺序反向，导致图片从下到上加载，影响用户体验

已确认imagesByCategory中每个分类的数组结构、顺序均正确，找不到问题原因，寻求排查方向。

排查思路 #

• 检查{#each}的key绑定逻辑：虽然用了(image.Key)作为key，但切换分类时，如果新数组的key在DOM中已有对应元素（比如不同分类存在重名GIF），Svelte的DOM复用机制可能会移动旧元素而非从头创建，打乱加载顺序。可临时去掉key，或改用(image.Key + selectedCategoryIndex)作为唯一key，强制Svelte重新创建所有元素，验证是否恢复正常加载顺序。
• 确认数组实际遍历顺序：即使你认为数组结构正确，也可以在切换分类时立即打印imagesByCategory[selectedCategoryIndex]的完整内容，确认代码中拿到的数组确实是正向的（排查是否有逻辑在切换时意外反转数组）。
• 排查浏览器加载优先级影响：浏览器会根据DOM元素位置、可见性调整加载优先级。如果切换分类后DOM元素是从下往上插入的，浏览器可能优先加载下方元素。可尝试给图片容器添加固定高度，或强制页面滚动到顶部，观察加载顺序是否变化。
• 检查ImageElement组件内部逻辑：排查自定义ImageElement组件是否有延迟加载、预加载或改变加载顺序的逻辑，比如是否使用loading="lazy"但触发顺序异常，或内部异步逻辑影响了请求发起时机。
• 验证Svelte的DOM更新逻辑：Svelte更新{#each}列表时会尽量复用DOM元素。若新列表与旧列表元素顺序不同，Svelte可能移动DOM元素而非重新渲染。可在{#each}块内添加data-index={index}属性，切换分类后查看DOM元素的data-index顺序是否与数组一致，确认DOM实际顺序是否正确。

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