Utilitário visível

O utilitário visible permite adiar a renderização do conteúdo até que seu elemento de espaço reservado entre ou esteja prestes a entrar na janela de visualização (usando IntersectionObserver nos bastidores).

Isso é extremamente útil para melhorar a velocidade de carregamento da página e o consumo de memória ao renderizar grandes listas de itens complexos, renderizar conteúdo abaixo da dobra ou carregar lentamente componentes fora da tela.

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)

Opções

O terceiro argumento é um objeto de opções opcional que suporta opções IntersectionObserver padrão, além de um sinalizador eager:

eager (booleano): quando definido como true, o conteúdo será renderizado imediatamente após a montagem, ignorando completamente a configuração do observador.
root (Elemento | Documento | nulo): O elemento que é usado como viewport para verificar a visibilidade do destino.
rootMargin (string): Margem ao redor da raiz.
threshold (número | número[]): Valor numérico ou array de valores que indica qual porcentagem da visibilidade do alvo o retorno de chamada do observador deve ser executado.

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

Desduplicação do observador

Para garantir desempenho máximo e sobrecarga mínima do navegador, o utilitário visible mantém um registro em nível de módulo de instâncias IntersectionObserver ativas. Se vários elementos visible compartilharem opções idênticas (por exemplo, todos eles usam rootMargin: '600px 0px'), eles compartilharão uma única instância IntersectionObserver global nos bastidores.

Limpeza Automática

Quando o modelo de encapsulamento é desmontado do DOM, o utilitário visible desobserva automaticamente os elementos e limpa quaisquer referências no registro do observador, evitando vazamentos de memória.

editar este documento