#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, чтобы задать, как обрабатывать ответ. - Не забудьте предусмотреть обработку повторных загрузок или добавить флаг, чтобы запрос не выполнялся повторно.
Матеріали для курсу
Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт
Завдання до уроку
Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань
Велике завдання за курсом
Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця
Також варто подивитися
