Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(common): scan images once page is loaded #52991

Closed
wants to merge 1 commit into from
Closed

fix(common): scan images once page is loaded #52991

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 12 additions & 3 deletions packages/core/src/image_performance_warning.ts
View file
Open in desktop
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.
AndrewKushnir marked this conversation as resolved.
Show resolved Hide resolved
// 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