Lazy loading for angular src image

Question

I have 1000 images in a list which are defined in the way below:

<img mat-list-avatar alt="" [src]="file.preview() | async | safe)" />

Since file.preview() takes around 200 milliseconds to execute, I would like to delay load it only for images that are visible in the browser viewport and get loaded bit by bit as the users loads them. So I found loading="lazy" but file.preview() gets executed nonetheless for 1000 images.

<img mat-list-avatar alt="" loading="lazy" [src]="file.preview | async
| safe)" />

Does anyone know why that is? Could that be related to the [src] directive called differently than a plain src attribute? Are there any other alternatives?

Vishal · Accepted Answer · 2020-08-22 07:50:35Z

2

As you are displaying the list of around 1000 data items user won't be seeing all those at single instance. I might be wrong but what I am interpreting is you are trying to render all 1000 data items in one go, which might be triggering preview api for all the list items. What I would suggest is to give input to your list component in batches. Onload just give 10 items as input to the rendering component. Keep a track of scroll bar and keep adding more data items to list. This way not all the data items will be rendered and prevent making a call to all the images.

answered Aug 22, 2020 at 7:50

Vishal

1502 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Stephens Over a year ago

Facepalm, I didn't think of that :-| Thanks!

Collectives™ on Stack Overflow

Lazy loading for angular src image

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related