Lazy Load with Dynamic Data

You can use the Lazy Load Component with dynamic data.

We have a dynamic masonry layout on our page, created from a database query. You can use any dynamic source of course - database, API data source or JSON file. Masonry is also not required, we just like it and that’s why we added it :slight_smile:

So, inside the repeat region, add new element:

Open the content category and select image:

Do not use the standard src option, it should remain empty. Enable the responsive option for your image, as you are usually doing for responsive images:

Add new dynamic attribute:

Open the Display category and add Dynamic Lazy Load:

Click the dynamic data picker button, to select your dynamic image source:

Select the binding you need and click the select button:

And you are done! Lazy Load has been applied to the dynamic images in your repeat region:

You can see the results in your browser. Only the needed images are loaded on page load, the rest are being loaded while you scroll down:


WapplerPrevious   WapplerNext


8 Likes

4 posts were split to a new topic: How to show images from database where database has image URL saved

I am sure is me doing some thing wrong, but wondering if the Dynamic Lazy Load only works with images?

I have a set of records that I want to repeat, and when the page user gets to the points to where the records are I would like to use the Dynamic Lazy Load

However, when trying to add the dynamic attribute I can find it. I am not sure if this could be added from somewhere else, or what i am trying to do can’t be done.
Thanks
Juan

Yes, lazy load is for images only.

@Teodor, thanks for letting me know! wondering if there is an alternative at all?
Thanks again for your help
Regards
Juan

Teodor, can the same be applied to all types of data or just images?

Hello, the lazy load options are available for images only.

Ok, no problem. Could this be a nice little feature request? Beneficial for long lists of data with an infinite scroll

I believe there’s a feature request for infinite scroll, you can vote for it :slight_smile:

1 Like

Ok, I’ll see if I can find it. Thanks Teodor.

There is actually three feature requests for it …

I think these threads should be merged.

I thought there was a fairly straightforward way to do this in Wappler as it is, but the method mentioned in this thread is not ideal (as explained in the thread). Hopefully this issue can be overcome when the feature is implemented.

I think it would be useful to have a ‘show more’ button as an alternative to infinite scrolling. I know this can be done quite easily, but if it can be done without the issue referred to above, it would be a great feature. Also, there are usability issues with infinite scrolling which in some situations are addressed by a ‘show more’ button.

1 Like