Discuss

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: