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 <[email protected]> --------- Co-authored-by: Ben McCann <[email protected]>
sveltejs · Nov 10, 2024 · d207666 · d207666
1 parent 1e5a385
commit d207666
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/nice-chicken-wonder.md 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
@@ -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
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<h1></h1><img src="..." loading="lazy" />`
+});
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
@@ -0,0 +1,2 @@
+<h1></h1>
+<img src="..." loading="lazy">