From d207666ec3066a7fed208141c31e06fcf3275059 Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Sun, 10 Nov 2024 17:48:10 +0100 Subject: [PATCH] fix: consider img with loading attribute not static (#14237) * fix: consider img with loading attribute not static * chore: add comment for `is_static_element` * chore: better comment Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --------- Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .changeset/nice-chicken-wonder.md | 5 +++++ .../phases/3-transform/client/visitors/shared/fragment.js | 5 +++++ .../samples/img-loading-lazy-no-static/_config.js | 5 +++++ .../samples/img-loading-lazy-no-static/main.svelte | 2 ++ 4 files changed, 17 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 0000000000..b9f6e39fb8 --- /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 022b8574d9..98272817df 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,11 @@ function is_static_element(node) { return false; } + // 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; + } + 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 0000000000..673ff2d754 --- /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 0000000000..15425d9051 --- /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