Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Lazy Loading of Images in AEM

Avatar

Level 1

Hello People,
Wanted to know if there is any implementation of Lazy loading specifically for images in AEM with no libraries. Any leads would be appreciated. 

Thanks,
Sesha Sai

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

This feature is available in aem 6.4. OOTB image component has an option choose lazy loading of the images.

Screen Shot 2019-07-26 at 10.00.57.png

Refernce link to configure the lazy loading:  Configuring Components in Design Mode

Thanks,

Vaibhavi

View solution in original post

8 Replies

Avatar

Level 10

OOTB - there is no feature like this. When you use an image component - the images are loaded immediately.

Avatar

Level 10

You would definitely need to use custom libraries (jquery or others) for same, however, you could convert the normal images to PWA-ready images using DAM Asset Update Workflow.

Refer to link for command to configure in workflow -  Generate progressive image with imagemagick in AEM http://430014083@stash.genworth.net/scm/aem/aem-redirect-rules.git

Avatar

Correct answer by
Community Advisor

This feature is available in aem 6.4. OOTB image component has an option choose lazy loading of the images.

Screen Shot 2019-07-26 at 10.00.57.png

Refernce link to configure the lazy loading:  Configuring Components in Design Mode

Thanks,

Vaibhavi

Avatar

Level 2
I am facing an issue when I enable lazy loading. The images get disappeared as soon as I enable lazy loading. The problem also occurs when I try configuring widths of images from the option given below the 'Display caption as pop-up'. I am using AEM 6.5.

Avatar

Level 3

have configured property in design dialog  based on below. Still Lazy loading is not happening.

I tried by changing value to true as well as false. But both didnt worked.

 

Any suggestions is appreciated. 

 

<enableLazyLoading
 jcr:primaryType="nt:unstructured"
 sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
 fieldDescription="Defer loading images until they become visible."
 name="./disableLazyLoading"
 text="Enable lazy loading"
 checked="{Boolean}false"
 uncheckedValue="true"
 value="{Boolean}false"/>

Avatar

Level 1

Hey Niks1,

Have you got solution for this or still waiting for response? if you get solution please let me know because I'm facing the same issue.

 

Thanks

Neha