Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Lazy Loading of Images in AEM

Sesha_Sai_Samud
Level 1
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
Vaibhavi_Gowda
Correct answer by
Community Advisor
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

6 Replies
smacdonald2008
Level 10
Level 10

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

Gaurav-Behl
Community Advisor
Community Advisor

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

Vaibhavi_Gowda
Correct answer by
Community Advisor
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

chintan97
Level 2
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.
niks1
Level 3
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"/>