Sling Model Invoked multiple times in AEM 6.4.8

[#1]

We have list of articles which has picture and Image elements and rendered as list in Sightly. If the list goes above 20 content, sling model is invoked multiple times and causing performance issue. Any help or lead on this issue?

[rangavinod]

Are you using data-sly-list in HTL?

can you please provide more details (Source code of Sling Model and your HTL)

[rangavinod]

Yes. It is data-sly-list. It's happening only with the images.

[SureshDhulipudi]

Are you using any scripts for image lazy loading ?

data-sly-list should work without multiple calls

@Model(adaptables = {Resource.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class StepspanelModel {

// Node - multified widget for images in dialog
@ChildResource(name = "stepimages")
private Resource imageResource;

private List<StepspanelImageTabModel> imageLinks ;

public List<SImageLinksModel> getSimagelinks() {
return simagelinks;
}

}

<div data-sly-use.stepspanelModel="com.corp.aem.guides.core.models.StepspanelModel">

<div data-sly-list.imagepath="${stepspanelModel.imageLinks}" data-sly-test="${stepspanelModel.imageLinks}">

<h4>Image Path::${imagepath.file}</h4>
<h4>Alt Text::${imagepath.alttext}</h4>
</div>
</div>

[SureshDhulipudi]

you can refer this example : https://helpx.adobe.com/experience-manager/using/aem64_htl_repeat_slingmodel.html