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?

Answer 1

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.