[Résolu] Lazy loading

.ma_class {
  	display:inline-block;
  	min-width:70%;
  	max-width:70%;
  	z-index:10;
  	margin:2em 16em 4em 10em;  	
  	box-shadow:26px 26px 26px #000;   
    	background:white;(C'est la première couleur)
    	transition:3s ease-in-out;}

.ma_class.scrolled {
	background:black;}(La seconde couleur qui apparaît au scrool)

drphilgood a écrit :
bonjour
peut t'on styliser la balise html loading=lazy en css
par exemple passer de l'image floue a nette
ou gris vers couleur
quand l'image apparait dans le viewport?

Bongota a écrit :
Il me semble que le lazyload n'est pas une balise html, c'est plutôt un processus.
Si drphilgood parle de loading=lazy, c'est qu'il utilise déjà le lazy natif du navigateur. Plus besoin d'interception observer. Ce qu'il veut, si j'ai bien compris, c'est une apparition progressive des div au moment du scrool. Sans css, comme celui que j'ai montré, ces div apparaissent directement. Mettre une progression donne un peu de "douceur" à la navigation et permet toutes sortes d'effets.

@drphilgood
Je te conseille de tester ma solution, elle est en ligne et fonctionne très bien. Par contre, j'utilise JavaScript avec interception observer pour le lazyload, je ne sais pas si mon css va fonctionner avec le lazyload natif des navigateurs, le processus n'étant plus basé sur le scrool. Ça ne coûte de toute façon pas cher de tester. Et il n'y a pas de raison que ça ne fonctionne pas, je viens de lire sur un site qui parle du lazyload natif "Une autre solution, quand le design le permet, peut être d'afficher l'image avec une animation, un fondu par exemple, une fois que celle-ci est chargée : ainsi l'effet devient volontaire et maîtrisé".

ps: drphilgood, c'était pas un groupe de rock des années 80 ?

kerlutinoec a écrit :


Le lazy loading natif charge les images très en amont de leur apparition. Styliser leur apparition (si cela marche) ne se verra pas.

img {opacity: 0.1}
.fade-in {animation: fadeIn 2s forwards;}
@keyframes fadeIn {
from {opacity: 0.1;}
to {opacity: 1;}
}

Bongota a écrit :
Bonne idée, une autre façon de le faire. Tu avais déjà présenté ce site, très beau et original, il y a quelques temps.

J'ai utilisé un autre JavaScript afin de faire apparaître les div au scrool. Le résultat est le même, sauf que chez toi, comme sur de très nombreux sites, l'effet ne se produit qu'une fois. Quand on remonte sur la page, la div ne s'efface pas progressivement. Et quand on redescend, il n'y a plus d'effet de fade in. Par contre, avec mon script, j'ai un effet désagréable que je ne retrouve pas chez toi.