排序时使用交观测器的延迟加载
排序时使用交观测器的延迟加载
提问于 2021-12-25 14:35:19
我输出了一堆图像，每个图像都封装在一个交叉口观察者中，使用的是svelte-相交观察者：
<script>
import IntersectionObserver from "svelte-intersection-observer";
let elements = {};
let intersects = {};
export let posts;
</script>
<section id="posts">
{#each posts as p}
<IntersectionObserver
once
element={elements[p]}
bind:intersecting={intersects[p]}
>
<div>
<img
bind:this={elements[p]}
src={intersects[p] ?
`/${p}/thumb.jpg`
:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
loading="lazy"
alt=""
width="350"
height="150"
/>
</div>
</IntersectionObserver>
{/if}
{/each}
</section>在页面上，我还提供了对posts数组进行排序的链接(例如，随机顺序，按id升序/降序)。
交叉口观察者在第一页加载和滚动时工作良好。
但是，一旦posts数组的顺序被更改(动态地，只需对数组进行排序)，intersect就不会对那些现在在viewport中的图像触发。当我向下滚动时，图像会被加载。但是那些处于顶端的人却不是。
回答 1
Stack Overflow用户
发布于 2021-12-25 16:09:27
有意思的。我能够用一个键控的每个循环来解决这个问题：
{#each posts as p (p)}
<IntersectionObserver ... />
{/each}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70480704
复制相关文章
相似问题
腾讯云开发者
