hx-preload

Установка

<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/ext/hx-preload.js"></script>

Использование

Добавьте атрибут hx-preload к любым усиленным гиперссылкам и элементам hx-get, которые нужно предварительно загрузить. По умолчанию ресурсы загружаются сразу после начала события mousedown, давая приложению фору примерно в 100–200 мс для отправки ответов.

<button hx-get="/server/1" hx-preload>Preloaded on mousedown</button>
<button hx-get="/server/2" hx-preload="mouseover">Preloaded on mouseover</button>

Все запросы предварительной загрузки включают дополнительный заголовок HX-Preloaded: true.

Интеграция с hx-boost

Когда расширение предварительной загрузки подключено, все теги привязок hx-boost автоматически предварительно загружаются при событии mousedown без необходимости явно указывать атрибут hx-preload. Чтобы отключить это поведение, задайте htmx.config.preload.autoBoost = false.

<!-- these are all automatically preloaded when the preload extension is loaded -->
<nav hx-boost:inherited="true">
    <a href="/page1">Page 1</a>
    <a href="/page2">Page 2</a>
</nav>

Чтобы отключить автоматическую предварительную загрузку усиленных ссылок:

<meta name="htmx-config" content='preload:{"autoBoost":false}'>

Обычные ссылки <a href> без hx-boost нельзя предварительно загрузить, поскольку предварительная загрузка прогревает запрос htmx — она не перехватывает переходы браузера.

События запуска

hx-preload / hx-preload="mousedown" (по умолчанию)

Начинает загрузку, когда пользователь нажимает кнопку мыши. Консервативный вариант — гарантирует, что пользователь намерен щёлкнуть. Даёт серверу фору в 100–200 мс.

hx-preload="mouseover"

Предварительно загружает ресурс, когда пользователь наводит указатель мыши на элемент. Более агрессивный вариант — даёт серверу фору в несколько сотен миллисекунд.

hx-preload="custom-event-name"

Для предварительной загрузки можно использовать любое имя события, поддерживаемое спецификациями триггеров htmx.

<button hx-get="/data" hx-preload="focus">Preload on focus</button>

Конфигурация

Все параметры задаются через htmx.config.preload:

<meta name="htmx-config" content='preload:{"autoBoost":true,"boostEvent":"mouseover","boostTimeout":"3s"}'>

Тайм-аут

По умолчанию срок действия предварительно загруженных ответов истекает через 5 секунд. Используйте модификатор timeout, чтобы переопределить это значение для отдельного элемента:

<button hx-get="/data" hx-preload="mousedown timeout:2s">Expires after 2s</button>

Ограничения

• Можно предварительно загружать только запросы GET. POST, PUT, PATCH и DELETE не загружаются.
• Обычные ссылки <a href> без hx-boost или hx-get нельзя предварительно загрузить.
• Предварительно загруженные ответы будут повторно использованы, только если фактический запрос будет выполнен до истечения тайм-аута.

Переход с htmx 2.x

• Атрибут preload теперь называется hx-preload.
• Для наследования предварительной загрузки от родительского элемента теперь требуется модификатор :inherited: hx-preload:inherited.