Image Lazy Loading in Dynamic Media Component

[salamswapnil]

Hello community,

I have a requirement where I need to lazy load images in dynamic media component. As per my knowledge there is no OOB feature for lazy loading in DM. I am using Lozad library for lazy loading.

Has anyone implemented image lazy loading in DM component?

Thanks & Regards

Swapnil

[Vaibhavi_J · Accepted solution]

Hi @salamswapnil , 

Lazy loading feature is available as apart of OOTB. 

I have added the details in below post . 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/lazy-loading-of-images-in-...

You can use the similar feature in dynamic media component as well. 

[salamswapnil]

Hi Vaibhavi,

Thanks for the reply. Looks like its not straight forward as OOB Image Component. Dynamic Media Component uses Responsive Image Library (JS Library) which makes Lazy Loading implementation little difficult. We need to override s7responsiveImage function from API and make necessary changes. We have minified version of this library that's why I am not able to override it.

[niks1]

With image component, when we try to use the Dynamic Media feature capability we can see blurriness in image if we don't specifi width. Any solution to use DM component with lazy loading feature

[vanegi]

Hi Swapnil,

Yes, we have this feature available OOTB. See https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/image.html, its part of core Image component.

Thanks,

Vaishali

[niks1]

Hi vanegi,

I am new to AEM and as a requirement we need to implement lazy loading for all images.

We are using Dynamic Media component, can you please help me if we have a feature in that.

Also, we are unable to view design mode on our website. Do we need to by default set the value of lazy loading via crdxe or can be changed at run time by designers ?