Vamos a llamar a la misma página para que nos muestre un contenido.
/parts/trigger-revealed.html
<p>esto es una revelación - <cite>airbag</cite></p>Y utilizamos diferentes «eventos especiales» a ver que ocurre.
load
load se dispara una vez cuando el elemento se carga por primera vez.
Se carga desde el principio, por lo que no se muestra el texto hola.
<div hx-trigger="load" hx-get="/parts/trigger-revealed.html">hola</div>revealed
revealed se dispara una vez cuando un elemento aparece por primera vez en la ventana gráfica.
A diferencia de load, que lo muestra al cargarse, revealed, muestra el contenido al aparecer en la ventana; recuerda al lazy load.
<div hx-trigger="revealed" hx-get="/parts/trigger-revealed.html">hola</div>Intersect
intersect se dispara una vez cuando un elemento se cruza por primera vez con la ventana gráfica.
Esto admite dos opciones adicionales:
- root:<selector> un selector CSS del elemento raíz para la intersección
- thresold:<float> un número de punto flotante entre 0,0 y 1,0, que indica en qué cantidad de intersección disparar el evento.
A falta de probarlo bien (entiendo que con alguna animación en la que pueda llegar a haber una intersección de elementos, o al desplazar la página que un elemento se acerque a un menú fijo…). De momento se comporta de forma parecida a revealed. Se muestra al aparecer en la ventana, hasta entonces, muestra el texto que especifiquemos.
<div hx-trigger="intersect" hx-get="/parts/trigger-revealed.html">load</div>
Detalles_
hx-trigger: revealed, load e intersect antes de aparecer en la ventana.
Podemos leer los textos hola y load. Además, la que ha cargado el contenido, ha añadido una clase vacía.
hx-trigger: revealed, load e intersect tras aparecer en la ventana
Se observa que se ha añadido una propiedad data-hx-revealed=»true» además de una clase vacía (lo mismo ocurre en todas las que se han cargado)
- También puede usar eventos personalizados para activar solicitudes si tiene un caso de uso avanzado.