懒加载

本页面演示了如何通过懒加载的形式向一个元素加载内容。我们从以下代码开始:

<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;
}
Server Requests ↑ Show

演示