Skip to content

Commit

Permalink
fix(common): scan images once page is loaded (angular#52991)
Browse files Browse the repository at this point in the history
This commit updates the implementation of the `ImagePerformanceWarning` and
runs the image scan even if the page has already been loaded. The `window.load`
event would never fire if the page has already been loaded; that's why we're
checking for the document's ready state.

PR Close angular#52991
  • Loading branch information
arturovt authored and amilamen committed Jan 26, 2024
1 parent d565500 commit 6d07c2a
Showing 1 changed file with 12 additions and 3 deletions.
15 changes: 12 additions & 3 deletions packages/core/src/image_performance_warning.ts
Expand Up @@ -22,7 +22,6 @@ const SCAN_DELAY = 200;

const OVERSIZED_IMAGE_TOLERANCE = 1200;


@Injectable({providedIn: 'root'})
export class ImagePerformanceWarning implements OnDestroy {
// Map of full image URLs -> original `ngSrc` values.
Expand All @@ -38,7 +37,8 @@ export class ImagePerformanceWarning implements OnDestroy {
return;
}
this.observer = this.initPerformanceObserver();
const win = getDocument().defaultView;
const doc = getDocument();
const win = doc.defaultView;
if (typeof win !== 'undefined') {
this.window = win;
// Wait to avoid race conditions where LCP image triggers
Expand All @@ -49,7 +49,16 @@ export class ImagePerformanceWarning implements OnDestroy {
// Angular doesn't have to run change detection whenever any asynchronous tasks are invoked in
// the scope of this functionality.
this.ngZone.runOutsideAngular(() => {
this.window?.addEventListener('load', waitToScan, {once: true});
// Consider the case when the application is created and destroyed multiple times.
// Typically, applications are created instantly once the page is loaded, and the
// `window.load` listener is always triggered. However, the `window.load` event will never
// be fired if the page is loaded, and the application is created later. Checking for
// `readyState` is the easiest way to determine whether the page has been loaded or not.
if (doc.readyState === 'complete') {
waitToScan();
} else {
this.window?.addEventListener('load', waitToScan, {once: true});
}
});
}
}
Expand Down

0 comments on commit 6d07c2a

Please sign in to comment.