时间戳

首页 > 解决方案 > Svelte 有没有办法以非阻塞方式加载 {#each} 元素？

svelte - Svelte 有没有办法以非阻塞方式加载 {#each} 元素？

问题描述

我有一个包含 1000 个对象的数组，这些对象表示列表的数据。现在，我正在做这个...

Main.svelte

<script>
  import Item from './Item.svelte'
  const array = [item1, item2, ....] //array of 1000 objects
</script>

<ul>
  {#each array as item}
    <Item item={item} />
  {/each}
</ul>

Item.svelte

<script>
  export let item = {}
</script>


<li>
  <h3>{item.title}</h3>
  <img src={item.src}/>
  <p>{item.description}</p>
</li>

但是，渲染时间很明显。我希望我可以对首屏下方的项目进行某种延迟加载。我试着做这样的事情......

Main.svelte

<script>
  import { onMount } from 'svelte'
  import Item from './Item.svelte'
  const array = [item1, item2, ....] //array of 1000 objects
  const array1 = array.slice(0,10)
  const array2 = []

  onMount(()=>setTimeout( ()=>array2 = array.slice(10), 333) 
  //this will fill up array2 333ms after the component mounts, giving array1 a chance to
  //render quickly
  

</script>

<ul>
  {#each array1 as item}
    <Item item={item} />
  {/each}
  {#if array2.length > 0}
    {#each array1 as item}
      <Item item={item} />
    {/each}
  {/if}
</ul>

Item.svelte

<script>
  export let item = {}
</script>


<li>
  <h3>{item.title}</h3>
  <img src={item.src}/>
  <p>{item.description}</p>
</li>

它基本上将前十个项目切成 array1，允许 array1 渲染，然后在 array2 渲染之前抛出延迟。这种工作，因为它看起来渲染速度很快，但是array2渲染时仍然有延迟，所以当我尝试滚动时，感觉很慢。

似乎 {#each} 正在阻塞线程，直到所有内容都被渲染，我希望有一种简单的方法让 {#each} 不阻塞线程。

标签： svelte

解决方案

推荐阅读