htmx 预加载扩展

preload 扩展允许您在用户请求之前将 HTML 片段加载到浏览器缓存中，这样附加页面对用户来说几乎是即时加载的。作为开发者，您可以自定义其行为以适应应用程序的需求和用例。

重要提示： 谨慎预加载内容可以改善您的 Web 应用程序的感知性能，但预加载过多资源可能会因发起过多未使用的请求而影响访客的带宽和服务器性能。请谨慎使用此扩展！

安装

安装 preload 的最快方式是通过 CDN 加载。请记得始终在扩展之前包含核心 htmx 库，并启用扩展。

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.0" integrity="sha384-fkzubQiTB69M7XTToqW6tplvxAOJkqPl5JmLAbumV2EacmuJb8xEP9KnJafk/rg8" crossorigin="anonymous"></script>
</head>
<body hx-ext="preload">
...

未压缩版本也可在 https://cdn.jsdelivr.net/npm/htmx-ext-preload/dist/preload.js 获取。

虽然 CDN 方法简单，但您可能需要考虑在生产环境中不使用 CDN。下一个最简单的安装 preload 的方法就是将其复制到您的项目中。从 https://cdn.jsdelivr.net/npm/htmx-ext-preload 下载扩展，将其添加到项目的适当目录中，并在需要时使用 <script> 标签包含它。

对于 npm 风格的构建系统，您可以通过 npm 安装 preload：

npm install htmx-ext-preload

安装后，您需要使用适当的工具将 node_modules/htmx-ext-preload/dist/preload.js（或 .min.js）打包。例如，您可以将扩展与来自 node_modules/htmx.org/dist/htmx.js 的 htmx 核心以及项目特定代码一起打包。

如果您使用打包器管理 JavaScript（例如 Webpack、Rollup）：

import `htmx.org`;
import `htmx-ext-preload`;

使用

使用 hx-ext 属性向 htmx 注册扩展。然后，向您想要预加载的任何超链接和 hx-get 元素添加 preload 属性。默认情况下，资源将在 mousedown 事件开始时加载，为您的应用程序提供大约 100-200 毫秒的响应提前时间。有关其他选项，请参见下面的配置。

<body hx-ext="preload">
<h1>有效的用法</h2>
    <a href="/server/1" preload>将会使用标准的 XMLHttpRequest() 和默认选项（如下）进行请求</a>
    <button hx-get="/server/2" preload>将会使用额外的 htmx 标头进行请求。</button>

    <h1>无效的用法</h1>
    <a href="/server/3">不会被预加载，因为它没有显式的 "preload" 属性</a>
    <a hx-post="/server/4" preload>不会被预加载，因为它是 HX-POST 事务。</a>
</body>

所有预加载请求都包含一个额外的 "HX-Preloaded": "true" 标头。

继承预加载设置

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


<body hx-ext="preload">
<ul preload>
    <li><a href="/server/1">由于上方节点的属性，这将被预加载。</a>
    <li><a href="/server/2">由于相同的原因，这也会被预加载。</a>
    <li><a href="/server/3">这也会被预加载。Lorem ipsum。</a>
</ul>
</body>

预加载表单

如果表单包含 hx-get 属性或使用 method="get"，该扩展可以预加载某些表单元素。preload 属性可以添加到表单或其部分选定元素上。目前可以预加载的表单元素包括：

预加载链接图片

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


<div hx-ext="preload">
    <a href="/my-next-page" preload="mouseover" preload-images="true">下一页</a>
</div>

配置

此扩展的默认设置旨在平衡用户的感知性能与服务器因未使用请求而承受的潜在负载。作为开发者，您可以修改两个设置以根据您的特定用例自定义此行为。

preload=“mousedown” (默认)

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

<a href="/server/1" preload="mousedown">当用户开始点击时，这将被预加载。</a>

preload=“mouseover”

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

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

<a href="/server/1" preload="mouseover">当用户的鼠标在其上停留超过
    100 毫秒时，这将被预加载。</a>

preload=“自定义事件名称”

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


<body hx-ext="preload">
<button hx-get="/server" preload="preload:init" hx-target="idLoadMore">加载更多</a>
    <div id="idLoadMore">
        此 DIV 的内容将在页面准备就绪时立即预加载。
        点击上面的按钮会将其交换到 DOM 中。
    </div>
</body>

preload=“always”

默认情况下，扩展会预加载每个元素一次。如果您希望始终保持预加载元素，可以添加 preload="always" 属性。这在 hx-target 不是元素本身时特别有用。此属性可以与其他配置属性组合使用，例如 preload="always mouseover"。

关于触摸事件

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

限制

致谢

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