Lazy loading of images in Mobile using list

Lazy loading of images in Mobile using list

  

Hi Everyone,

I have a mobile application that loads an article information using a List and displaying a text and Image via Card as list item. The problem is even I implemented the OnScrollEnding to display max of 10 records and increments 10 records per scroll ending  it still load slow and used too much bandwidth. 

Is there a component or widget that I can use to do a lazy loading for images? or is there a way to do this using Javascript?


Thank you

If I'm not mistaken, the platform's mobile Image widget will only load the image once it's scrolled into view.

Maybe your issue is caused by the size of your images? When you have a list of images, it's important they are optimized for the size they will be displayed in, so you aren't loading huge images, just to display their thumbnails.

Just to add to João answer,

Don't forget to use local entities and synchronization patterns, if possible, to avoid hitting the server every time you need something.

Cheers.

Eduardo Jauch wrote:

Just to add to João answer,

Don't forget to use local entities and synchronization patterns, if possible, to avoid hitting the server every time you need something.

Cheers.

We pull the images from AWS S3.


João Pedro Abreu wrote:

If I'm not mistaken, the platform's mobile Image widget will only load the image once it's scrolled into view.

Maybe your issue is caused by the size of your images? When you have a list of images, it's important they are optimized for the size they will be displayed in, so you aren't loading huge images, just to display their thumbnails.

How to implement a thumbnail in outsystems mobile app? Is there a widget for that? Thank you


PAUL CERVIN MITCH VILLARIN wrote:

How to implement a thumbnail in outsystems mobile app? Is there a widget for that? Thank you

A thumbnail is just a smaller version of an image. I'm sure there are 20 different ways you can implement that, but I suggest using an image hosting service, like Cloudinary to host all your images and then request them in an optimized size, for the context you are in.