fix(common): avoid redundant image fetch on destroy with auto sizes

SkyZeroZx · leonsenft · commit c1312da1832e · 2026-03-19T15:21:16.000-07:00
prevents browsers from re-fetch image during DOM teardown when using `sizes="auto"` with lazy loading. Fixes #67055
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -406,6 +406,15 @@ export class NgOptimizedImage implements OnInit, OnChanges {
         }
       });
     }
+
+    // Browsers might re-evaluate the image during DOM teardown when using `sizes="auto"`
+    // with `loading="lazy"`, potentially triggering an unnecessary image fetch.
+    // This is expected behavior per the HTML spec
+    // See: https://html.spec.whatwg.org/multipage/images.html#sizes-attributes
+    // See also: https://github.com/angular/angular/issues/67055#issuecomment-3898513831
+    this.destroyRef.onDestroy(() => {
+      this.renderer.removeAttribute(this.imgElement, 'loading');
+    });
   }
 
   /** @docs-private */

Original file line number	Diff line number	Diff line change
`@@ -406,6 +406,15 @@ export class NgOptimizedImage implements OnInit, OnChanges {`
`406`	`406`	`}`
`407`	`407`	`});`
`408`	`408`	`}`
	`409`	`+`
	`410`	+ // Browsers might re-evaluate the image during DOM teardown when using `sizes="auto"`
	`411`	+ // with `loading="lazy"`, potentially triggering an unnecessary image fetch.
	`412`	`+ // This is expected behavior per the HTML spec`
	`413`	`+ // See: https://html.spec.whatwg.org/multipage/images.html#sizes-attributes`
	`414`	`+ // See also: https://github.com/angular/angular/issues/67055#issuecomment-3898513831`
	`415`	`+ this.destroyRef.onDestroy(() => {`
	`416`	`+ this.renderer.removeAttribute(this.imgElement, 'loading');`
	`417`	`+ });`
`409`	`418`	`}`
`410`	`419`
`411`	`420`	`/** @docs-private */`