Lazy Load

+++ title = "Lazy Loading" template = "demo.html" +++

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

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:

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

{{ demoenv() }}

<script> server.autoRespondAfter = 2000; // longer response for more drama //========================================================================= // Fake Server Side Code //========================================================================= // routes init("/demo", function(request, params){ return lazyTemplate(); }); onGet("/graph", function(request, params){ return ""; }); // templates function lazyTemplate(page) { return `<div hx-get="/graph" hx-trigger="load"> </div>`; } </script>