Svelte中如何为数组第二项及以后的图片设置loading=lazy属性

问题原因 #

你的代码存在两个核心问题：

1. 分支逻辑互斥：只要post.image存在，就会直接命中第一个{#if post.image}分支，后续的{:else if post.id > 2}分支永远不会执行，因此懒加载属性无法正常添加。
2. 隐藏运行时错误：{:else if post.id > 2}是post.image为空时才会进入的分支，分支内依然调用post.image.formats.medium.url会直接抛出属性读取错误。

另外如果你的需求是从数组的第二个元素开始加懒加载，用post.id判断存在风险：如果帖子ID不是连续自增、或者初始ID不为1，判断逻辑会失效，更稳妥的方式是用数组遍历时的索引做判断。

修改方案 #

方案1：按ID判断（符合你原有逻辑） #

利用Svelte的属性绑定特性：如果绑定的属性值为undefined/null/false，Svelte会自动省略该属性，无需重复写两个<img>标签：

<script>
    // post props
    export let post;
</script>

<div>
    {#if post.image}
        <img 
            src={post.image.formats.medium.url} 
            alt={post.title} 
            loading={post.id > 2 ? 'lazy' : undefined}
        />
    {:else}
        <img 
            src="images/900x600.png" 
            alt={post.title} 
            loading="lazy"
        />
    {/if}
</div>

方案2：按数组索引判断（更符合「数组第二个元素开始」的需求） #

1. 父组件遍历帖子数组时，把当前元素的索引传递给子组件：

<!-- 父组件遍历逻辑 -->
{#each posts as post, index}
    <Post {post} {index} />
{/each}

2. 子组件接收索引参数，判断索引大于等于1（数组索引从0开始，第二个元素索引为1）时添加懒加载：

<script>
    export let post;
    // 接收父组件传递的索引
    export let index;
</script>

<div>
    {#if post.image}
        <img 
            src={post.image.formats.medium.url} 
            alt={post.title} 
            loading={index >= 1 ? 'lazy' : undefined}
        />
    {:else}
        <img 
            src="images/900x600.png" 
            alt={post.title} 
            loading="lazy"
        />
    {/if}
</div>

内容的提问来源于stack exchange，提问作者Ricardo de Paula