Utilitaire visible

L'utilitaire visible vous permet de différer le rendu du contenu jusqu'à ce que son élément d'espace réservé entre ou soit sur le point d'entrer dans la fenêtre (en utilisant IntersectionObserver sous le capot).

Ceci est incroyablement utile pour améliorer la vitesse de chargement des pages et la consommation de mémoire lors du rendu de grandes listes d'éléments complexes, du rendu du contenu sous la ligne de flottaison ou du chargement paresseux de composants hors écran.

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)

Possibilités

Le troisième argument est un objet d'options facultatif qui prend en charge les options standard IntersectionObserver, plus un indicateur eager :

eager (booléen) : lorsqu'il est défini sur true, le contenu sera rendu immédiatement après le montage, contournant complètement la configuration de l'observateur.
root (Élément | Document | null) : élément utilisé comme fenêtre d'affichage pour vérifier la visibilité de la cible.
rootMargin (string) : Marge autour de la racine.
threshold (number | number[]) : valeur numérique ou tableau de valeurs indiquant quel pourcentage de visibilité de la cible le rappel de l'observateur doit être exécuté.

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

Déduplication d'observateur

Pour garantir des performances maximales et une surcharge minimale du navigateur, l'utilitaire visible gère un registre au niveau du module des instances actives de IntersectionObserver. Si plusieurs éléments visible partagent des options identiques (par exemple, ils utilisent tous rootMargin: '600px 0px'), ils partageront une seule instance globale IntersectionObserver sous le capot.

Nettoyage automatique

Lorsque le modèle d'encapsulation est démonté du DOM, l'utilitaire visible désobserve automatiquement les éléments et nettoie toutes les références dans le registre d'observateur, évitant ainsi les fuites de mémoire.

modifier ce document