itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2026-04-09 04:05:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix docs

Browse Source
This commit is contained in:
Carson Gross
2026-04-07 16:26:28 -06:00
parent 318790cfc3
commit d42ef29b2f
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
www/src/content/docs/06-extensions/06-preload.md
View File

@@ -17,21 +17,21 @@ The `preload` extension allows you to load HTML fragments into your browser's ca
## Usage
Add a `preload` attribute to any hyperlinks and [`hx-get`](/reference/attributes/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.
Add an `hx-preload` attribute to any hyperlinks and [`hx-get`](/reference/attributes/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.
```html
<a href="/server/1" preload>Preloaded on mousedown</a>
<button hx-get="/server/2" preload>Preloaded with htmx headers</button>
<a href="/server/1" hx-preload>Preloaded on mousedown</a>
<button hx-get="/server/2" hx-preload>Preloaded with htmx headers</button>
```
All preload requests include an additional `"HX-Preloaded": "true"` header.
### Inheriting Preload Settings
You can add the `preload` attribute to a parent element, and all links within it will be preloaded:
You can add the `hx-preload` attribute to a parent element, and all links within it will be preloaded:
```html
<ul preload>
<ul hx-preload>
<li><a href="/page/1">This will be preloaded</a></li>
<li><a href="/page/2">This will also be preloaded</a></li>
</ul>
@@ -39,24 +39,24 @@ You can add the `preload` attribute to a parent element, and all links within it
## Configuration
### `preload="mousedown"` (default)
### `hx-preload="mousedown"` (default)
Begins loading when the user presses the mouse down. Conservative — guarantees the user intends to click. Gives your server a 100-200ms head start.
### `preload="mouseover"`
### `hx-preload="mouseover"`
Preloads when the user's mouse hovers over the link. A 100ms delay prevents loading when the user scrolls past. More aggressive — gives your server several hundred milliseconds of head start.
### `preload="custom-event-name"`
### `hx-preload="custom-event-name"`
Preload can listen to any custom event. The extension generates a `preload:init` event that can trigger preloads as soon as an element is processed by htmx.
### `preload="always"`
### `hx-preload="always"`
By default, the extension preloads each element once. Use `preload="always"` to preload on every trigger. Can be combined with other options: `preload="always mouseover"`.
By default, the extension preloads each element once. Use `hx-preload="always"` to preload on every trigger. Can be combined with other options: `hx-preload="always mouseover"`.
## Limitations
- Only `GET` requests can be preloaded (including `<a href="">` and `hx-get=""`). POST, PUT, and DELETE will not be preloaded.
- When listening to `mouseover` events, preload waits 100ms before downloading. If the mouse leaves before the timeout, the resource is not preloaded.
- Preloaded responses will only be cached if the response headers allow it (e.g., `Cache-Control: private, max-age=60`).
- Preloaded responses will only be cached if the response headers allow it (e.g., `Cache-Control: private, max-age=60`).