懒加载
本页面演示了如何通过懒加载的形式向一个元素加载内容。我们从以下代码开始:
<div hx-get="/graph" hx-trigger="load">
<img alt="Result loading..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>
以上展示了加载图表时的进度条。该图表通过 CSS 样式实现了淡入的加载效果。
.htmx-settling img {
opacity: 0;
}
img {
transition: opacity 300ms ease-in;
}