ESTHÉTIQUE
SIMPLICITÉ
EFFICACITÉ

Aneartiste sur facebook   Aneartiste sur twitter   Aneartiste sur scoop-it

Chargement différé d'une image au scrolling

Les mystères du “loading paresseux”

Que ce soit pour diminuer le temps d'affichage d'une page d'accueil, ou par souci altruiste d'économiser les ressources du web, – L'Ademe a établit qu'en France, les TIC contribuent à hauteur de 13,5% à la facture électrique et les internautes français émetteraient 288 000 tonnes éq CO2 par an, un chiffre certainement sous-évalué, puisque l'Ademe s'appuie sur une hypothèse de 2,6 recherches par jour et par internaute. – on voit se répandre les pages arborant des titres du style « Optimiser l'affichage de vos sites en différant le chargement des images » Si vous vous trouvez dans le premier cas avec un temps de chargement de page supérieur à 3 secondes, c'est probablement que votre page est déjà beaucoup trop lourde. Dans le second, la démarche, minimaliste, consiste à éliminer tout élément superflu : bibliothèque de scripts, plugin d'effets inutiles, animations et pop-ups, requètes vers des services tiers (adsense, adwords, analytics...), et évidemment compression des pages (feuilles html, php, css, javascript, et textes) en utilisant entre autres Minify ou des algorythmes tels que gzip, ou br. La démarche participe de ce désir d'aller vers davantage de frugalité (de faire moins, mais mieux) et de redécouvrir la satiété, cet état de satisfaction qui ne nécessite pas d’aller plus loin. Il s’agit de passer d’une logique quantitative à une logique qualitative.

Web,CC0 public pxhereCC0 public pxhere

« Essayons de converser sans nous exalter puisque nous sommes incapables de nous taire. »
—Samuel Beckett

L'une des dispositions préconisée est donc de suspendre l'affichage des images invisibles (c'est à dire hors de la fenêtre du navigateur) en attendant que l'utilisateur effectue le scrolling qui rendra nécessaire leur éventuelle apparition (l'envoi d'une image sur internet équivaut environ à 0,2g de CO², ce qui semble négligeable si l'on fait abstraction de la quantité. Pour donner un ordre de grandeur, 350 millions de photos sont téléchargées chaque jour sur le seul réseau Facebook). En attendant que cette méthodologie soit prise en charge par les navigateurs, il existe des plugins javascript qui gère cela très bien (Lazyload), ou des alternatives astucieuses comme celle de Sébastien Ollivier. Je me suis néanmoins amusé à écrire un petit script remplissant ces conditions (très évidemment perfectionnable, mais le but était de mettre en forme le concept de façon basique). J'utilise pour cela 3 API Web : innerHeight qui récupère la hauteur du contenu visible de la fenêtre de navigation, offsetTop qui renvoie la distance entre l'élément courant et le haut de l'élément parent, et enfin scrollTop qui renvoie le nombre de pixels du contenu d'élément ayant défilé vers le haut.

Au niveau du html, je me suis contenté de placer l'image dans une div nommé box.
 

html ------------------------------>
<div id="box">
<img
id="img1"
src="image.jpg"
/>
</div>

Ensuite l'image en question est caché avec une instruction display:none dans le css. Le comportement de celle-ci est géré dans le javascript à l'aide des instructions API cités plus haut.
 

Javascript ----------------------------->
 
'use strict';
 
function update_display() {
var img=document.getElementById('img1');
var box=document.getElementById('box');
var win_v=window.innerHeight;
var top=box.offsetTop;
var defil=document.body.scrollTop;
 
if (box.offsetParent) {
top=box.offsetTop;
while(box = box.offsetParent){
top += box.offsetTop;
}
}
var pos=top-defil;
if(pos<win_v) {
img.style.display='inline';
};
}
 
function init() {
window.addEventListener('scroll',update_display);
window.addEventListener('resize',update_display);
update_display();
}
 
init();
 

En l'état, le script fonctionne sur les versions récentes de Firefox, Chrome, Opera, Iron, Ie. Si l'on voulait réellement l'utiliser, il faudrait évidemment en premier lieu automatiser l'attribution des id sur les images avec un peu de PHP, et gérer différemment l'exécution de la fonction (appel direct depuis la div au moment de son apparition dans le viewport.) La démo complète – fonctionnelle, mais à l'état d'ébauche – peut être télécharger ici.

Internet - la pollution cachée,Pixabay GeraltPixabay Geralt

« Voilà l'homme tout entier, s'en prenant à sa chaussure alors que c'est son pied le coupable. »
—Samuel Beckett

Il est certainement injuste de diaboliser Internet, alors que c'est l'usage qui en est fait qui pose problème. Avec la 4g et l'optimisation des processeurs, la gourmandise médiatique à littéralement fait exploser les quotas : toujours plus d'images, de vidéos, d'interactions... On peut connaitre le poids réel d'une page web avec Firefox (tapez au clavier CTRL+MAJ+K, sélectionner l'onglet réseau, puis rechargez la page). On pourra voir par exemple que le poids d'une page facebook varie entre 4 et 10 Mo, plus de 3 Mo pour une page twitter basique, etc. On est très loin de l'adage des début d'internet qui voulait que le poids d'une page oscille entre 100 et 150 Ko.

publié le 28/11/2019, à 11h45 par Frédéric Schäfer

Précédent