Carregamento adiado com @defer

O bloco at-defer carrega de forma tardia parte de um modelo e suas dependências, melhorando o desempenho do carregamento inicial. O conteúdo adiado é dividido em um bloco separado.

Coloque o conteúdo dentro de um bloco at-defer. Por padrão, ele é carregado quando o navegador está ocioso.

Adiar componentes pesados ou que ficam abaixo da área visível mantém o pacote inicial pequeno e a primeira renderização rápida. O componente é carregado somente quando realmente necessário.

Um bloco at-placeholder exibe o conteúdo antes de o bloco adiado ser acionado.

Um bloco at-loading é exibido enquanto o trecho adiado está sendo buscado.

Um bloco at-error é renderizado se o carregamento das dependências adiadas falhar.

Você controla quando o carregamento começa usando acionadores em uma cláusula on, como on idle, on viewport, on interaction, on hover ou on timer.

O acionador on viewport carrega o conteúdo quando ele entra na área visível, sendo perfeito para seções abaixo da dobra.

on interaction carrega o conteúdo quando o usuário clica no marcador de posição ou o focaliza; on hover carrega quando o ponteiro passa sobre ele.

Você também pode usar when para acionar o carregamento com base em uma expressão booleana, carregando o conteúdo quando a expressão se torna verdadeira.

Você pode fazer a pré-busca do trecho adiado separadamente da renderização; por exemplo, usar prefetch on idle para que ele esteja pronto antes de o acionador de renderização ser executado.

Acionamento de conteúdo adiado.

Você aprendeu a usar o bloco at-defer para carregamento sob demanda, com os blocos at-placeholder, at-loading e at-error, além de acionadores como on idle, on viewport, on interaction, on hover, on timer e when, juntamente com a pré-busca. Você concluiu o curso Fluxo de controle integrado.