AEM 6.5中图片懒加载：HTL代码需修改哪些内容？

HTL本身并没有专门用于触发懒加载的“命令”，核心是通过输出特定属性配合你已开发的JavaScript逻辑来实现懒加载。针对HTL代码，需要做以下几类修改：

1. 调整图片属性的输出方式 #

• 不要直接将真实图片路径输出到src属性，而是将其放到自定义的data-*属性中（比如data-src、data-lazy-src，命名需和你的JS逻辑对应）。
• 给img标签添加懒加载标识类（比如lazy-image），方便JS选择目标元素。
• 为src属性设置占位内容（可以是1x1像素的base64图、低质量模糊占位图，或者AEM组件自带的占位资源），避免页面加载时出现无效请求或空白。

示例修改前的HTL代码：

<img src="${image.src}" alt="${image.alt}" width="${image.width}" height="${image.height}">

修改后的HTL代码：

<img class="lazy-image" 
     data-src="${image.src}" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     alt="${image.alt}" 
     width="${image.width}" 
     height="${image.height}">

2. 适配响应式图片场景 #

如果你的组件支持响应式srcset，同样需要将srcset的真实路径转移到data-srcset属性：

<img class="lazy-image" 
     data-src="${image.src}" 
     data-srcset="${image.srcset}" 
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
     alt="${image.alt}" 
     width="${image.width}" 
     height="${image.height}"
     sizes="${image.sizes}">

3. 背景图懒加载的处理（若涉及） #

如果组件是通过背景图展示图片，需要给容器元素添加标识类和存储真实背景图路径的自定义属性：

<div class="lazy-bg" data-bg="${image.src}">
  <!-- 容器内容 -->
</div>

核心逻辑说明 #

你的JavaScript代码需要监听这些带有标识类的元素（通过querySelectorAll选择），当元素进入视口时，将data-src（或data-bg）的值赋值给src（或background-image），从而触发图片的加载。

内容的提问来源于stack exchange，提问作者D Vara prasad