Lazy Loading

Demonstrates how to lazy load content

Back | Explain | Code | Htmx Docs
This example shows how to lazily load an element on a page. We start with an initial state that looks like this: ``` @app.get def page(): return Div(hx_get=get_content.rt(), hx_trigger="load", cls="container")( Img(src="/img/bars.svg", alt="Result loading...", cls="htmx-indicator", width="150"), ) ``` 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: ``` .htmx-settling img { opacity: 0; } img { transition: opacity 300ms ease-in !important; } ```

Direct url