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?

<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 stage sliders with images and texts.

[Madhur-Madan · Accepted solution]

Hi @AnjuA ,

Since you want to handle it using HTL you can simply check for the index and apply the appropriate condition. Below is a simple example for your reference.

<div data-sly-test.firstSlide="${stageListItemsList.index ==0}">

    <img src="your image path" loading="eager"/>

</div>

<div data-sly-test="${!firstSlide}">

    <img src="your image path" loading="lazy"/>

</div>

[arunpatidar]

You can improve above code to avoid repeating img tags e.g.

<sly data-sly-test.loadType="${stageListItemsList.index ==0 ? 'eager' : 'lazy'}" />
<img src="your image path" loading="${loadType}"/>