| CARVIEW |
Select Language
HTTP/2 301
cache-status: "Netlify Edge"; fwd=miss
content-type: text/html
date: Sat, 27 Dec 2025 02:27:20 GMT
location: /examples/lazy-load/
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01KDET3G8CD9D0NTZ4GRJ927N4
content-length: 98
HTTP/2 200
accept-ranges: bytes
age: 0
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; fwd=miss
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Sat, 27 Dec 2025 02:27:20 GMT
etag: "b172036256cfe456ae3c4716cbafce10-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01KDET3GJJ5FMHWF3MMJKYHVK9
</> htmx ~ Examples ~ Lazy Loading
Lazy Loading
This example shows how to lazily load an element on a page. We start with an initial state that looks like this:
<div hx-get="/graph" hx-trigger="load">
<img alt="Result loading..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</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:
.htmx-settling img {
opacity: 0;
}
img {
transition: opacity 300ms ease-in;
}
Server Requests ↑ Show