How to load page on mouseover, show it on click?

[nepsilon]

Hi!

I'm trying to emulate the behavior of https://instant.page/ with HTMX.

The idea is to:

1. On mouseover do GET /page
2. On click (on the same element) show the actual page

All while respecting the hx-select and hx-target directives.

Is such a thing possible? I can't find anything about this online and my own htmx tinkering didn't lead me anywhere close.

Thanks!

[jreviews]

Check out the preload extension https://htmx.org/extensions/preload/

[nepsilon]

Thanks Alejandro.

I'm still having troubles with this extension:

• When using it with preload="mouseover", 2 ajax requests are sent (the 2nd after the 1st finishes)
• When using either preload or preload="mouseover" a GET request gets made anyway when clicking my <a> link

I put hx-ext="preload" on the body element, and tried to add/remove all of the other hx-* attributes on my <a> link. E.g:

• <a preload="mouseover" href="/foo">Foo</a>
• <a preload="mouseover" href="/foo" hx-get="/foo" >Foo</a>
• <a preload="mouseover" href="/foo" hx-select="main">Foo</a>
• <a preload="mouseover" href="/foo" hx-select="main" hx-target="main">Foo</a>

Is this extension considered stable? Any live example or demo to understand what I did wrong? Thanks!

[nepsilon]

@benpate Any inputs? Thanks!

[benpate]

Hey @nepsilon - The extension is stable and works pretty well, with the following caveat: sometimes, the headers differ between the Ajax call that we make and the second HTTP call that is triggered with the click event. This is beyond the scope of the preload extension right now, but I'm hoping additional tools in htmx 2.0 will help us to address this corner case.

The solution is to check out the Vary headers that your server returns. Using Vary:* is pretty bad for any caching algorithm. Instead, if you limit it to only the HTTP headers that actually change your returned HTML then you should get great results.