本示例展示如何懒加载页面上的元素。初始状态如下:
<div hx-get="/graph" hx-trigger="load">
<img alt="正在加载结果..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>
在加载图表时会显示一个进度指示器。图表加载完成后,通过CSS过渡效果平滑地淡入视图:
.htmx-settling img {
opacity: 0;
}
img {
transition: opacity 300ms ease-in;
}