#4 – Подгрузка данных без перезагрузки страницы

Атрибут hx-trigger="revealed" в HTMX позволяет выполнять HTTP-запрос автоматически в тот момент, когда элемент становится видимым на экране. Это особенно полезно для реализации ленивой подгрузки (lazy loading) контента, например, при прокрутке страницы вниз.

Как это работает?

HTMX отслеживает элемент с атрибутом hx-trigger="revealed" и, как только он попадает в область видимости браузера (обычно при прокрутке), автоматически инициирует запрос, указанный в hx-get или hx-post.

Пример использования

<div hx-get="/more-posts" hx-trigger="revealed" hx-swap="outerHTML"> Загрузка... </div>

В этом примере, когда пользователь доскроллит до блока <div>, будет выполнен GET-запрос по адресу /more-posts. Ответ сервера заменит сам <div>, потому что указан hx-swap="outerHTML".

Преимущества

• Простота реализации ленивой загрузки
• Снижение первоначального объема загружаемых данных
• Улучшение производительности страницы

Советы

• Указывайте hx-swap, чтобы задать, как обрабатывать ответ.
• Не забудьте предусмотреть обработку повторных загрузок или добавить флаг, чтобы запрос не выполнялся повторно.