htmx 预加载扩展

preload 扩展允许您将 HTML 片段加载到浏览器的缓存中，在用户请求之前，这样额外页面就可以近乎瞬间加载。作为开发者，您可以自定义其行为，以适应应用程序的需求和用例。

重要提示：明智地预加载内容可以提高 Web 应用程序的感知性能，但预加载过多资源会对访问者的带宽和服务器性能产生负面影响，因为会启动太多未使用的请求。请谨慎使用此扩展！

安装

<script src="https://unpkg.com/[email protected]/preload.js"></script>

用法

使用 hx-ext 属性将扩展注册到 htmx。然后，将 preload 属性添加到您想要预加载的任何超链接和 hx-get 元素。默认情况下，资源会在 mousedown 事件开始时立即加载，让您的应用程序在响应方面领先约 100-200 毫秒。请参阅下面的配置以了解其他选项。


<body hx-ext="preload">
<h1>What Works</h2>
    <a href="/server/1" preload>WILL BE requested using a standard XMLHttpRequest() and default options (below)</a>
    <button hx-get="/server/2" preload>WILL BE requested with additional htmx headers.</button>

    <h1>What WILL NOT WORK</h1>
    <a href="/server/3">WILL NOT be preloaded because it does not have an explicit "preload" attribute</a>
    <a hx-post="/server/4" preload>WILL NOT be preloaded because it is an HX-POST transaction.</a>
</body>

继承预加载设置

您可以将 preload 属性添加到包含多个 <a href=""> 或 hx-get="" 元素的顶级元素，所有这些元素都将被预加载。请谨慎使用此设置，因为如果您预加载的资源比实际需要的多，最终可能会浪费带宽。


<body hx-ext="preload">
<ul preload>
    <li><a href="/server/1">This will be preloaded because of the attribute in the node above.</a>
    <li><a href="/server/2">This will also be preloaded for the same reason.</a>
    <li><a href="/server/3">This will be preloaded, too. Lorem ipsum.</a>
</ul>
</body>

链接图像的预加载

预加载 HTML 页面（或页面片段）后，此扩展还可以预加载链接的图像资源。它不会加载或运行链接的 JavaScript 或级联样式表内容，无论是在预加载的 HTML 中链接还是嵌入。


<div hx-ext="preload">
    <a href="/my-next-page" preload="mouseover" preload-images="true">Next Page</a>
</div>

配置

此扩展的默认值是在用户感知的性能和未使用的请求给服务器带来的潜在负载之间取得平衡。作为开发者，您可以修改两个设置，以将此行为自定义到您的特定用例。

preload=“mousedown”（默认）

此扩展的默认行为是在用户按下鼠标时开始加载资源。这是一个保守的设置，保证用户实际上打算使用链接资源。由于用户点击事件通常需要 100-200 毫秒才能完成，因此与常规点击相比，此设置让您的服务器有显著的领先优势。

<a href="/server/1" preload="mousedown">This will be preloaded when the user begins to click.</a>

preload=“mouseover”

为了更积极地预加载链接，您可以将预加载触发改为用户鼠标悬停在链接上时进行。为了防止用户滚动或将鼠标移动到一大串对象上时加载许多资源，此操作内置了 100 毫秒的延迟。如果用户鼠标在该超时时间到期之前离开元素，则不会预加载资源。

典型用户在点击之前会将鼠标悬停在链接上几百毫秒，这比上面的 mousedown 选项给您的服务器更多时间来响应请求。在此测试您自己的悬停时间。。但是，请谨慎使用此选项，因为它可能会通过不必要地请求资源来增加服务器负载。

<a href="/server/1" preload="mouseover">This will be preloaded when the user's mouse remains over it for more than
    100ms.</a>

preload=“custom-event-name”

预加载还可以监听系统内的任何自定义事件，如果资源尚未被浏览器缓存，则会触发资源的预加载。扩展本身会生成一个名为 preload:init 的事件，该事件可用于在 htmx 处理对象后立即触发预加载。


<body hx-ext="preload">
<button hx-get="/server" preload="preload:init" hx-target="idLoadMore">Load More</a>
    <div id="idLoadMore">
        Content for this DIV will be preloaded as soon as the page is ready.
        Clicking the button above will swap it into the DOM.
    </div>
</body>

关于触摸事件

为了适应触摸屏设备，每当您指定 mouseover 或 mousedown 触发器时，都会添加一个额外的 ontouchstart 事件处理程序。当用户触碰屏幕时，此额外触发器会立即触发（无需等待），在 Android 上为您节省 300 毫秒的等待时间，在 iOS 上节省 450 毫秒的等待时间。

限制

链接必须标记有 preload 属性，或者具有包含 preload 属性的祖先节点。
只有 GET 事务（包括 <a href=""> 和 hx-get=""）才能被预加载。遵循 REST 原则，GET 事务被认为不会对资源进行任何重大更改。可能进行更改的事务（例如 POST、PUT 和 DELETE）在任何情况下都不会被预加载。
监听 mouseover 事件时，预加载会等待 100 毫秒，然后再下载链接资源。如果鼠标在该超时时间到期之前离开资源，则不会预加载资源。
只有在响应头允许的情况下，预加载的响应才会在浏览器中缓存。例如，响应头 Cache-Control: private, max-age=60 允许浏览器缓存响应，而 Cache-Control: no-cache 则阻止缓存。

鸣谢

此插件的行为灵感来自于 Alexandre Dieulot 在 InstantClick 上的工作，该工作是根据 MIT 许可发布的。