Chargement progressif de vos images en JavaScript (Lazy-load)

 

Au dessus de la ligne de flottaison

Cette technique “Lazy-load” en anglais doit être utilisée sur les images “Below the fold”. Cela peut vous être très utile pour améliorer la performance de votre site Web si vous avez beaucoup d’images où simplement pour afficher des boutons partagent seulement si l’utilisateur se rend dans le footer.

En résumé, l’application de ce code vous permettra de charger les images de votre site uniquement si l’utilisateur défile la page jusqu’a celle-ci. Il vous est donc possible d’avoir des centaines d’images et de quand même avoir un site internet qui charge sous la barre de 1sec.

Il existe déjà plusieurs façons d’ajouter du lazy-load à vos images, mais aucune n’est plus rapide que celle-ci. Pourquoi? Parce que cette technique n’utilise aucune library JavaScript pour fonctionner.

C’est exact, aucun jQuery!

Les images

Vous devez tout d’abord ajouter toutes les images que vous voulez charger de façon progressive de cette façon:

<img class="lazy-load" src="/images/blank.gif" alt="" data-src="http://www.exemple.com/images/big-image.png" />
  1. Ajouter la classe “lazy-load”
  2. Changer la source de l’image pour une image déjà chargée plus haut, telle que votre logo où bien utiliser un gif transparent de 1px par 1px.
  3. Ajouter un attribut data-src avec le chemin d’accès à votre image.

Le JavaScript

Ajouter le JavaScript avant la fermeture de la balise .

<script>
 !function(){function e(e){var t=0;if(e.offsetParent){do t+=e.offsetTop;while(e=e.offsetParent);return t}}var t=window.addEventListener||function(e,t){window.attachEvent("on"+e,t)},o=window.removeEventListener||function(e,t,o){window.detachEvent("on"+e,t)},n={cache:[],mobileScreenSize:500,addObservers:function(){t("scroll",n.throttledLoad),t("resize",n.throttledLoad)},removeObservers:function(){o("scroll",n.throttledLoad,!1),o("resize",n.throttledLoad,!1)},throttleTimer:(new Date).getTime(),throttledLoad:function(){var e=(new Date).getTime();e-n.throttleTimer>=200&&(n.throttleTimer=e,n.loadVisibleImages())},loadVisibleImages:function(){for(var t=window.pageYOffset||document.documentElement.scrollTop,o=window.innerHeight||document.documentElement.clientHeight,r={min:t-300,max:t+o+300},i=0;i<n.cache.length;){var a=n.cache[i],c=e(a),l=a.height||0;if(c>=r.min-l&&c<=r.max){var s=a.getAttribute("data-src-mobile");a.onload=function(){this.className="lazy-loaded"},s&&screen.width<=n.mobileScreenSize?a.src=s:a.src=a.getAttribute("data-src"),a.removeAttribute("data-src"),a.removeAttribute("data-src-mobile"),n.cache.splice(i,1)}else i++}0===n.cache.length&&n.removeObservers()},init:function(){document.querySelectorAll||(document.querySelectorAll=function(e){var t=document,o=t.documentElement.firstChild,n=t.createElement("STYLE");return o.appendChild(n),t.__qsaels=[],n.styleSheet.cssText=e+"{x:expression(document.__qsaels.push(this))}",window.scrollBy(0,0),t.__qsaels}),t("load",function e(){for(var t=document.querySelectorAll("img[data-src]"),r=0;r<t.length;r++){var i=t[r];n.cache.push(i)}n.addObservers(),n.loadVisibleImages(),o("load",e,!1)})}};n.init()}();
</script>

Démo

Pour une démonstration vous pouvez utiliser l’article de votre choix sur ce site Web. Par exemple, l’image dans la section “À PROPOS DE L’AUTEUR” ci-dessous est charger en différé.

À votre tour

Utilisez-vous d’une façon où d’une autre du chargement différé pour vos images? Connaissez-vous une meilleure technique?