懒加载

此示例展示了如何在页面上懒加载一个元素。我们从一个初始状态开始，看起来像这样：

<div hx-get="/graph" hx-trigger="load">
  <img alt="正在加载结果..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>

这会在加载图形时显示一个进度指示器。然后，图形加载并通过 settling CSS 过渡轻轻淡入视图：

.htmx-settling img {
  opacity: 0;
}
img {
 transition: opacity 300ms ease-in;
}

🔗Demo