Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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?

 

 

<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.

1 Accepted Solution

Avatar

Correct answer by
Level 5

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>

View solution in original post

2 Replies

Avatar

Correct answer by
Level 5

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>

Avatar

Community Advisor

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}"/>

 



Arun Patidar