Lazy Load

Original HTMX Version

Demo

Explanation

This example shows how to lazily load an element on a page. We start with an initial state that looks like this:

<div data-fetch-url="" data-on-load="$$get('/examples/lazy_load/graph')">
  Loading...
</div>

Which shows a progress indicator as we are loading the graph. The graph is then loaded and faded gently into view via a settling CSS transition:

.datastar-settling {
  opacity: 0;
}