Utilidad visible

La utilidad visible le permite diferir la representación del contenido hasta que su elemento de marcador de posición ingrese o esté a punto de ingresar a la ventana gráfica (usando IntersectionObserver bajo el capó).

Esto es increíblemente útil para mejorar la velocidad de carga de la página y el consumo de memoria al renderizar listas grandes de elementos complejos, renderizar contenido en la mitad inferior de la página o cargar componentes fuera de la pantalla de forma diferida.

javascript
import { html, visible } from '@beforesemicolon/markup'

html`
    <div class="card-grid">
        ${visible(
            () => html`<heavy-card></heavy-card>`,
            html`<div class="card-placeholder">Loading...</div>`
        )}
    </div>
`.render(document.body)

Opciones

El tercer argumento es un objeto de opciones opcional que admite las opciones estándar IntersectionObserver, además de un indicador eager:

eager (booleano): cuando se establece en true, el contenido se representará inmediatamente después del montaje, omitiendo por completo la configuración del observador.
root (Elemento | Documento | nulo): el elemento que se utiliza como ventana gráfica para comprobar la visibilidad del objetivo.
rootMargin (cadena): Margen alrededor de la raíz.
threshold (número | número[]): Valor numérico o conjunto de valores que indica qué porcentaje de la visibilidad del objetivo se debe ejecutar la devolución de llamada del observador.

javascript
html`
    ${visible(
        () => html`<heavy-card></heavy-card>`,
        html`<div class="placeholder"></div>`,
        {
            eager: false,
            rootMargin: '600px 0px',
            threshold: 0,
        }
    )}
`

Deduplicación de observadores

Para garantizar el máximo rendimiento y una sobrecarga mínima del navegador, la utilidad visible mantiene un registro a nivel de módulo de instancias IntersectionObserver activas. Si varios elementos visible comparten opciones idénticas (por ejemplo, todos usan rootMargin: '600px 0px'), compartirán una única instancia IntersectionObserver global bajo el capó.

Limpieza automática

Cuando la plantilla de ajuste se desmonta del DOM, la utilidad visible automáticamente deja de observar los elementos y limpia cualquier referencia en el registro del observador, evitando pérdidas de memoria.

editar este documento