Skip to content

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

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

Closed
arturovt 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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions packages/core/src/image_performance_warning.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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.
Comment thread
AndrewKushnir marked this conversation as 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