preload

Documentation

Overview

package preload allows you to load HTML fragments into your browser’s cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously. As a developer, you can customize its behavior to fit your applications needs and use cases.

Index

• Constants
• func Preload[T any](hx htmx.HX[T]) T
• func PreloadImages[T any](hx htmx.HX[T], preloadImages bool) T
• func PreloadOn[T any](hx htmx.HX[T], event PreloadEvent) T
• type PreloadEvent

Examples

• Preload
• PreloadImages
• PreloadOn
• PreloadOn (Init)

Constants

const Extension htmx.Extension = "preload"

Extension allows you to load HTML fragments into your browser’s cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously. As a developer, you can customize its behavior to fit your applications needs and use cases.

Install

<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/preload.js"></script>

Extension: preload

Functions

func Preload

func Preload[T any](hx htmx.HX[T]) T

Preload adds a preload attribute to any hyperlinks and hx-get elements you want to preload. By default, resources will be loaded as soon as the mousedown event begins, giving your application a roughly 100-200ms head start on serving responses.

Extension: preload

Example

package main

import (
	"fmt"

	"github.com/will-wow/typed-htmx-go/htmx"
	"github.com/will-wow/typed-htmx-go/htmx/ext/preload"
)

var hx = htmx.NewStringAttrs()

func main() {
	attr := preload.Preload(hx)
	fmt.Println(attr)
}

Output:

preload

func PreloadImages

func PreloadImages[T any](hx htmx.HX[T], preloadImages bool) T

PreloadImages preloads linked image resources after an HTML page (or page fragment) is preloaded.

Extension: preload

Example

package main

import (
	"fmt"

	"github.com/will-wow/typed-htmx-go/htmx"
	"github.com/will-wow/typed-htmx-go/htmx/ext/preload"
)

var hx = htmx.NewStringAttrs()

func main() {
	attr := preload.PreloadImages(hx, true)
	fmt.Println(attr)
}

Output:

preload-images='true'

func PreloadOn

func PreloadOn[T any](hx htmx.HX[T], event PreloadEvent) T

PreloadOn adds a preload attribute to any hyperlinks and hx-get elements you want to preload, specifying the event that triggers the preload.

Extension: preload

Example

package main

import (
	"fmt"

	"github.com/will-wow/typed-htmx-go/htmx"
	"github.com/will-wow/typed-htmx-go/htmx/ext/preload"
)

var hx = htmx.NewStringAttrs()

func main() {
	attr := preload.PreloadOn(hx, preload.MouseOver)
	fmt.Println(attr)
}

Output:

preload='mouseover'

Example (Init)

package main

import (
	"fmt"

	"github.com/will-wow/typed-htmx-go/htmx"
	"github.com/will-wow/typed-htmx-go/htmx/ext/preload"
)

var hx = htmx.NewStringAttrs()

func main() {
	attr := preload.PreloadOn(hx, preload.Init)
	fmt.Println(attr)
}

Output:

preload='preload:init'

Types

type PreloadEvent

type PreloadEvent string

A PreloadEvent represents the event that triggers the preload.

const (
	MouseDown PreloadEvent = "mousedown"    // The default behavior for this extension is to begin loading a resource when the user presses the mouse down.
	MouseOver PreloadEvent = "mouseover"    // To preload links more aggressively, you can trigger the preload to happen when the user’s mouse hovers over the link instead.
	Init      PreloadEvent = "preload:init" // The extension itself generates an event called preload:init that can be used to trigger preloads as soon as an object has been processed by htmx.
)