htmx 预加载扩展

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

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

安装

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

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js" integrity="sha384-ZBXiYtYQ6hJ2Y0ZNoYuI+Nq5MqWBr+chMrS/RkXpNzQCApHEhOt2aY8EJgqwHLkJ" 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-200ms 的响应服务提前量。有关其他选项，请参阅下面的配置。

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

    <h1>无效的内容</h1>
    <a href="/server/3">WILL NOT 因为没有明确的“preload”属性而不会被预加载</a>
    <a hx-post="/server/4" preload>WILL NOT 因为它是 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-200ms 才能完成，此设置与常规点击相比，为您的服务器提供了显著的提前量。

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

preload=“mouseover”

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

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

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

preload=“custom-event-name”

预加载还可以监听系统中的任何自定义事件，触发资源被预加载（如果它们尚未被浏览器缓存）。扩展本身会生成一个名为 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 上为您节省 300ms 的等待时间，在 iOS 上节省 450ms。

限制

鸣谢

此插件的行为受到了 Alexandre Dieulot 在 InstantClick 上所做工作的启发，该工作根据 MIT 许可证发布。