Chargement différé avec @defer

Le bloc at-defer charge à la demande une partie d'un modèle et ses dépendances, ce qui améliore les performances du chargement initial. Le contenu différé est séparé dans un bloc de code distinct.

Placez le contenu dans un bloc at-defer. Par défaut, il est chargé lorsque le navigateur est au repos.

Différer les composants lourds ou situés sous la ligne de flottaison permet de conserver un paquet initial réduit et un premier affichage rapide. Le composant n'est chargé que lorsque cela est réellement nécessaire.

Un bloc at-placeholder affiche le contenu avant le déclenchement du bloc différé.

Un bloc at-loading s’affiche pendant le chargement du fragment différé.

Un bloc at-error est rendu si le chargement des dépendances différées échoue.

Vous contrôlez le début du chargement avec des déclencheurs dans une clause on, comme on idle, on viewport, on interaction, on hover ou on timer.

Le déclencheur on viewport charge le contenu lorsqu’il apparaît dans la zone visible, ce qui est idéal pour les sections situées sous la ligne de flottaison.

on interaction charge le contenu lorsque l’utilisateur clique sur l’espace réservé ou lui attribue le focus ; on hover le charge lorsque le pointeur le survole.

Vous pouvez également déclencher le chargement à partir d’une expression booléenne avec when, le chargement commençant lorsque l’expression devient vraie.

Vous pouvez précharger le fragment différé indépendamment de son rendu, par exemple avec prefetch on idle, afin qu’il soit prêt avant l’activation du déclencheur de rendu.

Déclencher du contenu différé.

Vous avez découvert le bloc at-defer pour le chargement différé, avec les blocs at-placeholder, at-loading et at-error, ainsi que des déclencheurs comme on idle, on viewport, on interaction, on hover, on timer et when, sans oublier le préchargement. Vous avez terminé le cours sur le flux de contrôle intégré.