Expand my Community achievements bar.

SOLVED

Image Lazy Loading in Dynamic Media Component

Avatar

Level 6

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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. 

 

 

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

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. 

 

 

Avatar

Level 6

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.

Avatar

Level 3
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

Avatar

Employee

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

Avatar

Level 3

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 ?