Discuss

Lazy Load with Dynamic Data

On this page

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:

Screenshot_2|690x383

Open the content category and select image:

Screenshot_3|690x383

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:

Screenshot_4|690x383

Add new dynamic attribute:

Screenshot_5|690x383

Open the Display category and add Dynamic Lazy Load:

Screenshot_6|690x383

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

Screenshot_7|690x383

Select the binding you need and click the select button:

Screenshot_8|690x383

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

Screenshot_9|690x383

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:

ezgif-1-54bc3e9688fc|690x373


WapplerPrevious|101x31   WapplerNext|77x31