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, surtout lorsque les images sont responsives en pourcentage. Lorsque la taille de l'image est fixe, on peut se contenter d'écrire les attributs HTML height et width...

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 ?).

On peut aussi simplifier le code HTML et appliquer la classe .lazy-load-image et les attributs data directement à une balise <img>, alors pas de loader et animation d'apparition forcément sur opacity (voir la dernière image de cette démo).

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>

Ou juste <img src="img/transpa-640x480.png" alt="" class="lazy-load-image lazy-img-alone" data-src="img/2017-1985.png" id="wtf">

CSS

css/regal-lazy-load.css
.lazy-load-image : position: relative; 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 : opacity:1; 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).
.lazy-img-alone : opacity:0 et transition sur opacity (pour animation apparition) à appliquer en plus de .lazy-load-image lorsqu'on utilise la version HTML simple
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();