Les images lazy-load

Un conteneur .lazy-load-image, cible du plugin, qui contient un loader lazy-load-loader et une image lazy-img.

Par défaut, on affiche une image transparente de la même taille que l'image finale (pour assurer un affichage correct de la page avant chargement de la source finale).

Lorsque le bloc arrive dans le view-port, on charge l'image finale.

Un attribut data-src indique la source de l'image finale.
Un attribut data-delta (facultatif) indique la valeur que l'on ajoute à la hauteur de la fenêtre pour lancer le lazy-load (on peut ainsi s'assurer que l'image est chargée avant d'arriver dans le view-port). Valeur numérique traduite en pixels ou "window" pour rajouter la hauteur de la fenêtre (et pourquoi pas ?).

Code

HTML

<div class="lazy-load-image" data-src="img/2017-2017.png"> <div class="lazy-load-loader pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> <img src="img/transpa-640x480.png" alt="" class="lazy-img"> </div>

CSS

css/regal-lazy-load.css
.lazy-load-image : position: relative et overflow: hidden;
.lazy-load-loader : position: absolute, left et top: 50%, z-index: -1 (pour être recouvert par le visuel final) et transform translate(-50%, -50%);
.lazy-img : transform translate(-100%, 0) et transition sur transform;
.lazy-image-loaded : appliqué à lazy-load-image lorsque l'image finale est chargée. J'applique alors un transform translate(0, 0) à .lazy-img, pour animation apparition de gauche à droite (mais tu peux choisir la transition qui te plait en modifiant les classes, hein ! et tu peux du coup appliquer aussi une classe différente à .lazy-load-loader si ça te chante).

css/regal-lazy-load-demo.css
.pswp__preloader__icn : loader animé en pure CSS (http://web-tricks.org/content/how-create-loading-image-using-css-only).

Javascript

css/regal-lazy-load-plugin.js
Déclaration des plugins :
$('.lazy-load-image').regalLazyLoad();