SvelteとIntersection Oberverによるレイジーローディング

{#each images as image}
 {#if scrolledToImage}
  <img src={image} />
 {/if}
{/each}

<script>
import { fade } from 'svelte/transition';
let images = [img1, img2, img3, ...]
let scrolls = [scrollForImg1, scrollForImg2, scrollForImg3, ...]
</script>
 
{#each images as image, index}
 {#if scrolls[index]}
  <div transition:fade={{ duration: 300 }}>
   <img src={image} />
  </div>
 {/if}
{/each}

let callback = (entries, observer) => {
 entries.forEach((entry) => {
  if (entry.isIntersecting) {
   // load image
  }
 });
};

let observer = new IntersectionObserver(callback, { threshold: 0 }); 
// threshold:0 means any part of item is intersecting the viewport. I.e. the view is scrolled to.
 
observer.observe(element);

<script>
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';

// Array that will keep the image divs
let divs = images.map(() => null);

// Array that will keep info about whether an image is scrolled to
let scrolls = images.map(() => false);

// Setup intersection observer when component is mounted 
onMount(async () => {
 let callback = (entries, observer) => {
  entries.forEach((entry) => {
   if (entry.isIntersecting) {
    // we get the div id, which will point us to the right element in scrolls array
    scrolls[entry.target.id] = true;
   }
  });
 };

 // Set the rooter as the div with id "container" as that is the parent div of the images
 let observer = new IntersectionObserver(callback, { threshold: 0, root: document.querySelector('#container') });

 // Observe each div
 divs.forEach((d) => {observer.observe(d)});
});
</script>

// NOTE1: the parent div of each image needs to have an initial height. (E.g. 300px)
// Otherwise, they will be defaulted to 0 at first,
// and all images will be intersecting with the container.
// This will load all images at once, which will defy our purpose.

// NOTE2: transition:fade should NOT be dded to img element
// Instead, add an enclosing div, and add it to that div
// Otherwise, transitions don't work on image elements.

<div id="container">
 {#each images as image, index}
  <div bind:this={divs[index]} id={index} class="min-h-[300px]">
   {#if scrolls[index]}
    <div transition:fade={{ duration: 500 }}>
     <img src={image} class="h-[300px] object-contain" alt="An object" />
    </div>
   {/if}
  </div>
 {/each}
</div>