Lazy Load with Dynamic Data

#1

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


3 Likes
Image Galleries & Animations
Wappler Official Documentation
Applying a Masonry Grid
Photography website
automatically bumped #9
automatically bumped #10
automatically bumped #11
automatically bumped #12
automatically bumped #13
automatically bumped #14
automatically bumped #15
automatically bumped #16