How to lazy load images?

Ionic Framework ionic-v3
1

I have a long list of items with images. I only want to load the images when the items are actually to be scrolled into view. Are there ready made libraries or implementation for that available? Any best practices?

1 Like
2

Look into virtualScroll and ion-img.

1 Like
3

A post was split to a new topic: virtualScroll with cards? approxItemHeight?

4

There are two costs to manage: cost of calling the backend, and cost of calling the DOM. Our solution for a similar problem was to download a lot of thumbnails (and metadata) from the backend, and to display those thumbnails with virtualScroll or something similar. Then, if the user focuses on a particular thumbnail, the software downloads the large file from the backend. This way, the average query to the backend is inexpensive, and the DOM only renders the thumbnails it needs to.

5

this is my code … ion-img not work as expected, it not load …

        <ion-img  style="width: 100%; height: 400px" src='http://xxx.xxx..xx.xx/{{post.postImg}}'></ion-img>

   </div>
   <div style="padding: 10px">
     <div class="dd">FOXBURY</div>
     <div style="color:gainsboro">Stepney Shoulder T-shirt</div>
     <div style="font-weight: bold">249 SAR</div>
    </div>
  </ion-card-content>
6

“Features include only loading images which are visible”
“Note: ion-img is only meant to be used inside of virtual-scroll”

What about if I don’t want to use a lazy-loading and I just to display the image when if finishes loading?

Is this ok? (at least it works)
<img src=“assets/images/{{mode}}.svg” (load)=“img = true” [hidden]="!img" #imgModeElem />

7

Can use this package