From cee58e99bdcf03d6be242575a77917043c89596b Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Sat, 9 Nov 2024 21:58:43 +0100 Subject: [PATCH 1/3] fix: consider img with loading attribute not static --- .changeset/nice-chicken-wonder.md | 5 +++++ .../phases/3-transform/client/visitors/shared/fragment.js | 4 ++++ .../samples/img-loading-lazy-no-static/_config.js | 5 +++++ .../samples/img-loading-lazy-no-static/main.svelte | 2 ++ 4 files changed, 16 insertions(+) create mode 100644 .changeset/nice-chicken-wonder.md create mode 100644 packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte diff --git a/.changeset/nice-chicken-wonder.md b/.changeset/nice-chicken-wonder.md new file mode 100644 index 000000000000..b9f6e39fb858 --- /dev/null +++ b/.changeset/nice-chicken-wonder.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: consider img with loading attribute not static diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js index 022b8574d974..2ab503d26cd3 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js @@ -150,6 +150,10 @@ function is_static_element(node) { return false; } + if (node.name === 'img' && attribute.name === 'loading') { + return false; + } + if (node.name.includes('-')) { return false; // we're setting all attributes on custom elements through properties } diff --git a/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js new file mode 100644 index 000000000000..673ff2d75465 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + html: `

` +}); diff --git a/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte new file mode 100644 index 000000000000..15425d905158 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte @@ -0,0 +1,2 @@ +

+ \ No newline at end of file From 26a1dfab87407561a55326d2da655968431ae4bb Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Sun, 10 Nov 2024 15:00:31 +0100 Subject: [PATCH 2/3] chore: add comment for `is_static_element` --- .../phases/3-transform/client/visitors/shared/fragment.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js index 2ab503d26cd3..3d5dbeb87dfc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js @@ -150,6 +150,8 @@ function is_static_element(node) { return false; } + // an img with loading lazy is not static but needs the `img` to be + // generated to be passed to `handle_lazy_img` if (node.name === 'img' && attribute.name === 'loading') { return false; } From 2b439bc9e5b082244da3a417e75879c6f1b4bc7b Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Sun, 10 Nov 2024 17:09:36 +0100 Subject: [PATCH 3/3] chore: better comment Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .../phases/3-transform/client/visitors/shared/fragment.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js index 3d5dbeb87dfc..98272817df7d 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js @@ -150,8 +150,7 @@ function is_static_element(node) { return false; } - // an img with loading lazy is not static but needs the `img` to be - // generated to be passed to `handle_lazy_img` + // We need to apply src and loading after appending the img to the DOM for lazy loading to work if (node.name === 'img' && attribute.name === 'loading') { return false; }