fix: better support for lazy img elements

[trueadm]

Fixes #11497.

This was a tricky one. We already have a heuristic to use importNode in the codebase, so retrofitting it to support loading="lazy" was relatively trivial.

However that didn't fix the problem. In fact, lazy images weren't working in Chrome for me either (I added a onload event to the images to test this behaviour).

The reason was because our comment template was being cloned, even though it's just a comment node. I presume this is because we're inserting the elements that were from importNode into an element from cloneNode. Either way, this PR seems to remedy the problem.

Unfortunately, none of this is testable with JSDOM and I battled with Playwright, but to no avail.

[changeset-bot]

🦋 Changeset detected

Latest commit: ed27773

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Conduitry]

I think we probably need to worry about dynamic loading attributes as well, right? What about <img> tags with spread attributes?

[trueadm]

I think we probably need to worry about dynamic loading attributes as well, right? What about <img> tags with spread attributes?

Good points, updated PR.

[Conduitry]

Is there anything else we ought to be worrying about? <svelte:element>? {@html}? I'm not really clear on how much of a de-opt we're introducing in this PR and how to weight that against correctness in all situations.

[trueadm]

<svelte:element> and {@html} are unaffected as they doesn't use templates that we clone.

[yamplum]

Hi again. Thanks for taking the time to look into this. Unfortunately, this solution doesn't seem to work if the <img> is rendered conditionally, for example:

<div style="height: 3000px; background: black;"></div>

<!-- Also doesn't work in {#each} blocks.  -->
{#if true}
	<img height="200" width="200" loading="lazy" src="https://picsum.photos/seed/{Math.random()}/200">
{/if}

Svelte 4 REPL

Svelte 5 REPL

For some context, in my own SvelteKit project I have a page that has a grid of lazy images in an {#each} block. It seems to work correctly when I load the page directly, which is why I didn't notice it initially, but if I navigate to it from another page, all downloads fire simultaneously. I have SSR disabled so I'm a little confused as to what's going on.

Experimenting some more, it seems that lazy loading breaks when there's a sibling element next to the conditional block, such as the div in my repro, or the conditional block is wrapped in another element.

[trueadm]

@yamplum Please could you create a new issue for this as it seems different from the original. Thank you :)