Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: better support for lazy img elements #11545

Merged
merged 3 commits into from
May 10, 2024
Merged

fix: better support for lazy img elements #11545

merged 3 commits into from
May 10, 2024

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented May 10, 2024

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.

Copy link

changeset-bot bot commented May 10, 2024

🦋 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
Copy link
Member

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

@trueadm
Copy link
Contributor Author

trueadm commented May 10, 2024

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
Copy link
Member

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
Copy link
Contributor Author

trueadm commented May 10, 2024

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

@trueadm trueadm merged commit c450cdb into main May 10, 2024
8 checks passed
@trueadm trueadm deleted the fix-lazy branch May 10, 2024 20:09
@yamplum
Copy link

yamplum commented May 13, 2024

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
Copy link
Contributor Author

trueadm commented May 13, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Svelte 5: <img loading="lazy"> loads eagerly in Firefox (regression)
3 participants