Using Angular 17 @defer to display img tag loading state | Angular Community | Page 1

fresh pilot · 2023-12-05T16:35:34.219Z

All you should need is something like this: ```html Placeholder... ``` Explanations: - `loading="lazy"` tells the browser to load the image lazily, when the image is in the view port or close to enter the viewport - the image is initially hidden using CSS to not display it until it's loaded - the `(load)` event listener tells you when the image has been loaded, allowing you to display the image.

fresh pilot Dec 5, 2023, 4:35 PM

#

All you should need is something like this:

    <img [style.display]="loaded ? '': 'none'" src="https://picsum.photos/id/433/900/500.jpg" loading="lazy" (load)="loaded = true"/>
    <div *ngIf="!loaded">Placeholder...</div>

Explanations:

loading="lazy" tells the browser to load the image lazily, when the image is in the view port or close to enter the viewport
the image is initially hidden using CSS to not display it until it's loaded
the (load) event listener tells you when the image has been loaded, allowing you to display the image.

fresh pilot Dec 5, 2023, 9:05 PM

#

Each image could be in its own component with that lazy loading logic.
I don't see how defer would change anything. defer is about loading JavaScript lazily, not images.

dreamy cliff Dec 5, 2023, 10:47 PM

#

Can you provide the img tag with the option you used?

honest igloo Dec 6, 2023, 9:12 AM

#

You can try ngOptimizeImage for that.

https://angular.dev/api/common/NgOptimizedImage

Angular

The web development framework for building modern apps.

#Using Angular 17 @defer to display img tag loading state