Threshold value having no effect (SvelteKit)

[hardingjam]

<IntersectionObserver once element={node} let:intersecting threshold={0.1}>
		<div bind:this={node}>
			{#if intersecting}
				<img
					on:load={imageIsLoaded}
					src={image}
					alt={name}
				/>
			{/if}
		</div>
	</IntersectionObserver>

Regardless of the low threshold, the images only load when 100% intersected with the viewport. Is this a known issue, or am I doing something wrong?

[metonym]

Here's an adapted Svelte REPL that demos a custom threshold (0.5); even changing it to 0.1 should have an effect.

I wonder if it could be a styling issue? Is this div actually below the viewport?

In your example, the image isn't rendered at all initially. Perhaps the div needs a minimum height for the threshold to apply?

[lvnam96]

as @metonym said, in order to let IntersectionObserver works, the bind:this element (div in your example) must have "visible" pixels initially (height & width must be at least 1px).