Chargement paresseux natif dans le navigateur – Meilleure programmation

Online Coding Courses for Kids

Quand un img ou iframe est dans le code HTML et analysé par le navigateur, il chargera immédiatement les sources. Cela bloque toute la page pour terminer le chargement.

Cela entraînera un temps plus long pour charger la page, il faut donc plus de temps à l’utilisateur pour interagir avec la page. Nous voulons que l’utilisateur interagisse avec la page aussi rapidement que possible.

Les gens intelligents ont donc proposé un chargement paresseux. Il s’agit d’une technique permettant d’afficher des images et de ne charger les iframes que lorsqu’ils sont visibles par l’utilisateur. Cela garantira que l’utilisateur télécharge uniquement ce qui est visible.

Histoire

À l’époque, nous avons effectué un chargement paresseux via un écouteur d’événements de défilement. Avec chaque événement, nous avons vérifié le tableau avec des images et des iframes si l’un d’eux était visible.

S’ils étaient visibles, nous devions changer l’attribut data-src=" source URL" à `src=“source URL”. Cela charge une image ou une page à ce moment.

Mais un événement de défilement est très inefficace car il déclenche d’innombrables événements dans un délai très court.

Nous avons dû calculer si l’élément était visible avec getBoundingClientRect(). L’inconvénient était qu’à chaque appel, cela obligeait le navigateur à réorganiser la page entière.

Pour l’époque, ce n’était pas idéal. Mais c’était mieux que de charger toutes les images par chargement de page afin que l’utilisateur doive attendre que la page soit complètement chargée.

Close Menu