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

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider img with loading attribute not static

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
 		}

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" />`
+});

packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte

@@ -0,0 +1,2 @@
+<h1></h1>
+<img src="..." loading="lazy">