better fix

Author: trueadm

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -51,6 +51,11 @@ export function set_attribute(element, attribute, value) {
 
 	if (attributes[attribute] === (attributes[attribute] = value)) return;
 
+	if (attribute === 'loading') {
+		// @ts-expect-error
+		element.__loading = value;
+	}
+
 	if (value === null) {
 		element.removeAttribute(attribute);
 	} else {
@@ -345,10 +350,13 @@ export function handle_lazy_img(element) {
 	// templates.
 	if (!hydrating && element.loading === 'lazy') {
 		var src = element.src;
-		element.removeAttribute('loading');
+		// @ts-expect-error
+		element.__loading = null;
+		element.loading = 'eager';
 		element.removeAttribute('src');
 		requestAnimationFrame(() => {
-			if (element.loading !== 'eager') {
+			// @ts-expect-error
+			if (element.__loading !== 'eager') {
 				element.loading = 'lazy';
 			}
 			element.src = src;

packages/svelte/tests/runtime-runes/samples/image-loading-attribute/_config.js

@@ -2,9 +2,6 @@ import { test } from '../../test';
 
 export default test({
 	async test({ assert, target }) {
-		assert.htmlEqual(
-			target.innerHTML,
-			`<img alt="Svelte" loading="eager" src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20358.464%20235.952'%3e%3cdefs%3e%3cstyle%3e.a{fill:%23ff3e00;}.b{fill:%23fff;}.c{fill:%231273ff;}.d{fill:%23ffd815;}%3c/style%3e%3csymbol%20id='a'%20viewBox='0%200%2093.224%20112'%3e%3cpath%20class='a'%20d='M87.269,14.819C76.869-.066,56.328-4.478,41.477,4.984L15.4,21.608A29.921,29.921,0,0,0,1.876,41.651,31.514,31.514,0,0,0,4.984,61.882,30.006,30.006,0,0,0,.507,73.065,31.892,31.892,0,0,0,5.955,97.181c10.4,14.887,30.942,19.3,45.791,9.835L77.829,90.392A29.915,29.915,0,0,0,91.347,70.349a31.522,31.522,0,0,0-3.1-20.232,30.019,30.019,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116'/%3e%3cpath%20class='b'%20d='M38.929,98.582a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968A5.844,5.844,0,0,0,28,83.122a6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L62.382,68.281a5.43,5.43,0,0,0,2.451-3.631,5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.755,5.755,0,0,0-1.6.7l-9.953,6.345a19.06,19.06,0,0,1-5.3,2.326,20.719,20.719,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,22.915,32.37L49,15.747a19.03,19.03,0,0,1,5.3-2.329,20.72,20.72,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5,18.453,18.453,0,0,1-.624,2.435l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.241,6.241,0,0,0-6.7-2.485,5.748,5.748,0,0,0-1.6.7L30.842,43.719a5.421,5.421,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328,20.718,20.718,0,0,1,22.236,8.243,19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L44.229,96.253a19.017,19.017,0,0,1-5.3,2.329'/%3e%3c/symbol%3e%3c/defs%3e%3cuse%20width='93.224'%20height='112'%20transform='translate(34.228%2029.267)%20scale(1.584)'%20xlink:href='%23a'/%3e%3c/svg%3e">`
-		);
+		assert.htmlEqual(target.innerHTML, `<img alt="Svelte" loading="eager" src="foo.png">`);
 	}
 });

packages/svelte/tests/runtime-runes/samples/image-loading-attribute/main.svelte

@@ -1,13 +1,9 @@
 <script>
-	let loading = $state('lazy');
+	let loading = $state('lazy')
 
 	$effect(() => {
-		loading = 'eager';
+		loading = 'eager'
 	})
 </script>
 
-<img
-	alt="Svelte"
-	src={"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20358.464%20235.952'%3e%3cdefs%3e%3cstyle%3e.a{fill:%23ff3e00;}.b{fill:%23fff;}.c{fill:%231273ff;}.d{fill:%23ffd815;}%3c/style%3e%3csymbol%20id='a'%20viewBox='0%200%2093.224%20112'%3e%3cpath%20class='a'%20d='M87.269,14.819C76.869-.066,56.328-4.478,41.477,4.984L15.4,21.608A29.921,29.921,0,0,0,1.876,41.651,31.514,31.514,0,0,0,4.984,61.882,30.006,30.006,0,0,0,.507,73.065,31.892,31.892,0,0,0,5.955,97.181c10.4,14.887,30.942,19.3,45.791,9.835L77.829,90.392A29.915,29.915,0,0,0,91.347,70.349a31.522,31.522,0,0,0-3.1-20.232,30.019,30.019,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116'/%3e%3cpath%20class='b'%20d='M38.929,98.582a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968A5.844,5.844,0,0,0,28,83.122a6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L62.382,68.281a5.43,5.43,0,0,0,2.451-3.631,5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.755,5.755,0,0,0-1.6.7l-9.953,6.345a19.06,19.06,0,0,1-5.3,2.326,20.719,20.719,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,22.915,32.37L49,15.747a19.03,19.03,0,0,1,5.3-2.329,20.72,20.72,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5,18.453,18.453,0,0,1-.624,2.435l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.241,6.241,0,0,0-6.7-2.485,5.748,5.748,0,0,0-1.6.7L30.842,43.719a5.421,5.421,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328,20.718,20.718,0,0,1,22.236,8.243,19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L44.229,96.253a19.017,19.017,0,0,1-5.3,2.329'/%3e%3c/symbol%3e%3c/defs%3e%3cuse%20width='93.224'%20height='112'%20transform='translate(34.228%2029.267)%20scale(1.584)'%20xlink:href='%23a'/%3e%3c/svg%3e"}
-  {loading}
-/>
+<img alt="Svelte" src="foo.png" {loading} />