diff --git a/lazyload/bars.svg b/lazyload/bars.svg
new file mode 100644
index 0000000..7cb07e6
--- /dev/null
+++ b/lazyload/bars.svg
@@ -0,0 +1,52 @@
+<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#494949">
+ <rect y="10" width="15" height="120" rx="6">
+ <animate attributeName="height"
+ begin="0.5s" dur="1s"
+ values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+ repeatCount="indefinite" />
+ <animate attributeName="y"
+ begin="0.5s" dur="1s"
+ values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+ repeatCount="indefinite" />
+ </rect>
+ <rect x="30" y="10" width="15" height="120" rx="6">
+ <animate attributeName="height"
+ begin="0.25s" dur="1s"
+ values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+ repeatCount="indefinite" />
+ <animate attributeName="y"
+ begin="0.25s" dur="1s"
+ values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+ repeatCount="indefinite" />
+ </rect>
+ <rect x="60" width="15" height="140" rx="6">
+ <animate attributeName="height"
+ begin="0s" dur="1s"
+ values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+ repeatCount="indefinite" />
+ <animate attributeName="y"
+ begin="0s" dur="1s"
+ values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+ repeatCount="indefinite" />
+ </rect>
+ <rect x="90" y="10" width="15" height="120" rx="6">
+ <animate attributeName="height"
+ begin="0.25s" dur="1s"
+ values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+ repeatCount="indefinite" />
+ <animate attributeName="y"
+ begin="0.25s" dur="1s"
+ values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+ repeatCount="indefinite" />
+ </rect>
+ <rect x="120" y="10" width="15" height="120" rx="6">
+ <animate attributeName="height"
+ begin="0.5s" dur="1s"
+ values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+ repeatCount="indefinite" />
+ <animate attributeName="y"
+ begin="0.5s" dur="1s"
+ values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+ repeatCount="indefinite" />
+ </rect>
+</svg>
diff --git a/lazyload/handlers.go b/lazyload/handlers.go
new file mode 100644
index 0000000..5fe3eef
--- /dev/null
+++ b/lazyload/handlers.go
@@ -0,0 +1,39 @@
+package lazyload
+
+import (
+ _ "embed"
+ "net/http"
+ "time"
+)
+
+var (
+ //go:embed tokyo.png
+ graphBytes []byte
+ //go:embed bars.svg
+ barsBytes []byte
+)
+
+func Handlers(prefix string, mux *http.ServeMux) {
+ mux.HandleFunc(prefix+"/", index)
+ mux.HandleFunc(prefix+"/graph", graph)
+ mux.HandleFunc(prefix+"/bars.svg", bars)
+ mux.HandleFunc(prefix+"/tokyo.png", tokyo)
+}
+
+func index(w http.ResponseWriter, r *http.Request) {
+ Index().Render(r.Context(), w)
+}
+
+func graph(w http.ResponseWriter, r *http.Request) {
+ time.Sleep(2 * time.Second)
+ graphImage().Render(r.Context(), w)
+}
+
+func bars(w http.ResponseWriter, r *http.Request) {
+ w.Header().Set("Content-Type", "image/svg+xml")
+ w.Write(barsBytes)
+}
+
+func tokyo(w http.ResponseWriter, r *http.Request) {
+ w.Write(graphBytes)
+}
diff --git a/lazyload/templates.templ b/lazyload/templates.templ
new file mode 100644
index 0000000..8ff587f
--- /dev/null
+++ b/lazyload/templates.templ
@@ -0,0 +1,27 @@
+package lazyload
+
+import "examples/shared"
+
+templ demo() {
+ <style>
+ .htmx-settling img {
+ opacity: 0;
+ }
+ img {
+ transition: opacity 300ms ease-in;
+ }
+ </style>
+ <div hx-get="/lazy-loading/graph" hx-trigger="load"><img alt="Result loading..." class="htmx-indicator" width="150" src="/lazy-loading/bars.svg"/></div>
+}
+
+templ graphImage() {
+ <img alt="Tokyo Climate" src="/lazy-loading/tokyo.png"/>
+}
+
+templ Index() {
+ @shared.Layout("Lazy Loading") {
+ <h2 class="title">Lazy Loading</h2>
+ @demo()
+ }
+}
+
diff --git a/lazyload/templates_templ.go b/lazyload/templates_templ.go
new file mode 100644
index 0000000..359ef59
--- /dev/null
+++ b/lazyload/templates_templ.go
@@ -0,0 +1,212 @@
+// Code generated by templ@(devel) DO NOT EDIT.
+
+package lazyload
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+// GoExpression
+import "examples/shared"
+
+func demo() templ.Component {
+ return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+ templBuffer, templIsBuffer := w.(*bytes.Buffer)
+ if !templIsBuffer {
+ templBuffer = templ.GetBuffer()
+ defer templ.ReleaseBuffer(templBuffer)
+ }
+ ctx = templ.InitializeContext(ctx)
+ var_1 := templ.GetChildren(ctx)
+ if var_1 == nil {
+ var_1 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+// RawElement
+ _, err = templBuffer.WriteString("<style>")
+ if err != nil {
+ return err
+ }
+// Text
+var_2 := `
+ .htmx-settling img {
+ opacity: 0;
+ }
+ img {
+ transition: opacity 300ms ease-in;
+ }
+ `
+_, err = templBuffer.WriteString(var_2)
+if err != nil {
+ return err
+}
+ _, err = templBuffer.WriteString("</style>")
+ if err != nil {
+ return err
+ }
+ // Element (standard)
+ _, err = templBuffer.WriteString("<div")
+ if err != nil {
+ return err
+ }
+ // Element Attributes
+ _, err = templBuffer.WriteString(" hx-get=\"/lazy-loading/graph\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(" hx-trigger=\"load\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(">")
+ if err != nil {
+ return err
+ }
+ // Element (void)
+ _, err = templBuffer.WriteString("<img")
+ if err != nil {
+ return err
+ }
+ // Element Attributes
+ _, err = templBuffer.WriteString(" alt=\"Result loading...\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(" class=\"htmx-indicator\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(" width=\"150\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(" src=\"/lazy-loading/bars.svg\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(">")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString("</div>")
+ if err != nil {
+ return err
+ }
+ if !templIsBuffer {
+ _, err = io.Copy(w, templBuffer)
+ }
+ return err
+ })
+}
+
+func graphImage() templ.Component {
+ return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+ templBuffer, templIsBuffer := w.(*bytes.Buffer)
+ if !templIsBuffer {
+ templBuffer = templ.GetBuffer()
+ defer templ.ReleaseBuffer(templBuffer)
+ }
+ ctx = templ.InitializeContext(ctx)
+ var_3 := templ.GetChildren(ctx)
+ if var_3 == nil {
+ var_3 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ // Element (void)
+ _, err = templBuffer.WriteString("<img")
+ if err != nil {
+ return err
+ }
+ // Element Attributes
+ _, err = templBuffer.WriteString(" alt=\"Tokyo Climate\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(" src=\"/lazy-loading/tokyo.png\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(">")
+ if err != nil {
+ return err
+ }
+ if !templIsBuffer {
+ _, err = io.Copy(w, templBuffer)
+ }
+ return err
+ })
+}
+
+func Index() templ.Component {
+ return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+ templBuffer, templIsBuffer := w.(*bytes.Buffer)
+ if !templIsBuffer {
+ templBuffer = templ.GetBuffer()
+ defer templ.ReleaseBuffer(templBuffer)
+ }
+ ctx = templ.InitializeContext(ctx)
+ var_4 := templ.GetChildren(ctx)
+ if var_4 == nil {
+ var_4 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ // TemplElement
+ var_5 := templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
+ templBuffer, templIsBuffer := w.(*bytes.Buffer)
+ if !templIsBuffer {
+ templBuffer = templ.GetBuffer()
+ defer templ.ReleaseBuffer(templBuffer)
+ }
+ // Element (standard)
+ _, err = templBuffer.WriteString("<h2")
+ if err != nil {
+ return err
+ }
+ // Element Attributes
+ _, err = templBuffer.WriteString(" class=\"title\"")
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString(">")
+ if err != nil {
+ return err
+ }
+ // Text
+ var_6 := `Lazy Loading`
+ _, err = templBuffer.WriteString(var_6)
+ if err != nil {
+ return err
+ }
+ _, err = templBuffer.WriteString("</h2>")
+ if err != nil {
+ return err
+ }
+ // Whitespace (normalised)
+ _, err = templBuffer.WriteString(` `)
+ if err != nil {
+ return err
+ }
+ // TemplElement
+ err = demo().Render(ctx, templBuffer)
+ if err != nil {
+ return err
+ }
+ if !templIsBuffer {
+ _, err = io.Copy(w, templBuffer)
+ }
+ return err
+ })
+ err = shared.Layout("Lazy Loading").Render(templ.WithChildren(ctx, var_5), templBuffer)
+ if err != nil {
+ return err
+ }
+ if !templIsBuffer {
+ _, err = io.Copy(w, templBuffer)
+ }
+ return err
+ })
+}
+
diff --git a/lazyload/tokyo.png b/lazyload/tokyo.png
new file mode 100644
index 0000000..6ccc936
Binary files /dev/null and b/lazyload/tokyo.png differ
diff --git a/main.go b/main.go
index 7e29c90..1b58493 100644
--- a/main.go
+++ b/main.go
@@ -6,6 +6,7 @@ import (
"examples/clicktoload"
"examples/deleterow"
"examples/editrow"
+ "examples/lazyload"
"log"
"net/http"
@@ -65,4 +66,10 @@ var examples = []Example{
Slug: "edit-row",
Handlers: editrow.Handlers,
},
+ {
+ Name: "Lazy Loading",
+ Desc: "Demonstrates how to lazy load content",
+ Slug: "lazy-loading",
+ Handlers: lazyload.Handlers,
+ },
}