Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to add eager loading to image of first slide and lazy loading attribute to images of other slides.

Avatar

Level 2

I want to add eager loading to image of first slide and lazy loading to images of other slides in the following code. Is there a way to add it using HTL?


Code is:
<div class="owl-carousel owl-theme stage-slider-multi">
<sly data-sly-test="${stages.stageSlideList}">
<sly data-sly-list.stageListItems="${stages.stageSlideList}">
<div class="stage-item" data-dot="<button class='stage-slider-progressbar'><div class='stage-slider-progressbar-animation'></div></button><button role='button' class='stage-slider-title'>${stageListItems.statusLineText}</button>">
<div data-slideIndex="${stageListItemsList.index}" class="slideIndex"></div>
<sly data-sly-test="${stageListItems.stagePath}" data-sly-resource="${stageListItems.stagePath @wcmmode='disabled',selectors='content'}" />
</div>
</sly>
</sly>
</div>

${stageListItems.stagePath} contains single slides with images and texts.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

 

Here are a couple of thoughts about how to do it:

 

  1. Include the Image Core component as the resource so that you can manually edit the "laziness" of the component through the dialog. Refer to this link to better understand what I am talking about: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/lazy-loading-of-images-in-..., https://www.oshyn.com/blog/tips-for-optimizing-images-in-aem

  2. Include your custom Component that manages the "laziness" based on a selector. In this way, you could check for the first element and add a selector that will be a flag to render the Image with the "eager" configuration. Check this link to know more about it: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/extra-parameters-in-data-s...

Hope this helps



Esteban Bustamante

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi,

 

Here are a couple of thoughts about how to do it:

 

  1. Include the Image Core component as the resource so that you can manually edit the "laziness" of the component through the dialog. Refer to this link to better understand what I am talking about: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/lazy-loading-of-images-in-..., https://www.oshyn.com/blog/tips-for-optimizing-images-in-aem

  2. Include your custom Component that manages the "laziness" based on a selector. In this way, you could check for the first element and add a selector that will be a flag to render the Image with the "eager" configuration. Check this link to know more about it: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/extra-parameters-in-data-s...

Hope this helps



Esteban Bustamante