htmx 預載擴充功能

preload 擴充功能允許您在使用者請求之前，將 HTML 片段載入到瀏覽器的快取中，以便使用者能幾乎瞬間載入額外的頁面。作為開發人員，您可以自訂其行為以符合您的應用程式需求和使用案例。

重要提示： 謹慎地預載內容可以提高您的 Web 應用程式的感知效能，但是預載過多的資源可能會因發起過多未使用的請求而對訪客的頻寬和您的伺服器效能產生負面影響。請小心使用此擴充功能！

安裝

<script src="https://unpkg.com/htmx-ext-preload@2.0.1/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=“自訂事件名稱”

預載還可以監聽系統中的任何自訂事件，觸發要預載的資源（如果它們尚未被瀏覽器快取）。擴充功能本身會產生一個名為 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 許可證發布。