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

[AnjuA]

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.

[abhinavbalooni]

Hey @AnjuA 

You can get more help by posting this query on the AEM community page here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ct-p/adobe-experience-mana...

Cheers,

Abhinav

[EstebanBustamante · Accepted solution]

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