Outils pour utilisateurs

Outils du site


code-client:ne-pas-charger-de-donnees-lourdes-si-elles-ne-sont-pas-visibles

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

code-client:ne-pas-charger-de-donnees-lourdes-si-elles-ne-sont-pas-visibles [2018/02/07 16:25] (Version actuelle)
romainpetiot créée
Ligne 1: Ligne 1:
 +====== Ne pas charger de données lourdes si elles ne sont pas visibles
 + ​======
  
 +Le but est de diminuer le poids total des éléments téléchargés en se limitant aux données visibles. Ceci n’a de sens que si le volume de données non visibles (images, graphiques) est important.
 +
 +Dans les cas où la longeur de la page est bien supérieure à la hauteur de la fenêtre du navigateur et que la quantité de données à afficher est importante, il est possible de ne pas afficher les données (images) non visibles.
 +
 +Cette fonctionnalité est permise par la technique du lazy loading, qui n'est cependant pas native dans les navigateurs. Il faudra donc soit utiliser du code JavaScript, soit utiliser une bibliothèque.
 +
 +Cette technique se base sur l'​utilisation de la fonction "​getBoundingClientRect"​ d'un élément en la comparant avec la propriété "​innerHeight"​ de la fenêtre du navigateur.
 +
 +Ce fonctionnement peut aussi s'​appliquer si la fenêtre n'est pas visible (chargement dans un onglet).
 +
 +Attention à ne pas charger un fichier JavaScript contenant toute une librairie de fonctions si seule la fonction de lazy loading est utile.
 +
 +En HTTP2, le lazy load peux ne pas avoir l'​effet escompté (à confirmer par étude)
code-client/ne-pas-charger-de-donnees-lourdes-si-elles-ne-sont-pas-visibles.txt · Dernière modification: 2018/02/07 16:25 par romainpetiot