Famille Michon, le 25/07/2013 à 13:28
Cette démo montre comment appliquer un effet à un élément d'une page en fonction de sa visibilité à l'écran (ici, on décale de 200 pixels pour voir l'effet en haut et en bas de la page)
Dans la balise body, on appelle OnScrollDiv() pour le onscroll et le onload. Puis on utilise getBoudingClientRect et window.innerHeight pour déterminer si le Rect de l'élément est dans la partie visible de la page ou pas.
function OnScrollDiv() {
var elems = document.getElementsByClassName('lazy');
var el = elems[0];
for (var i=0, nb=elems.length ; i <nb ; i++, el = elems[i]) {
var rect = el.getBoundingClientRect();
var isVisible = ((rect.top - window.innerHeight) < 0-200 && (rect.bottom) > 200 ) ? true : false ;
el.style.backgroundColor = (isVisible) ? 'blue' : 'red';
}
}
(
Permalink)
Sebsauvage, le 25/07/2013 à 14:51
Sympa comme petite démo Javascript: Déterminer si un élément est visible dans le viewport. (Essayez de scroller la page). C'est le genre de chose qui devrait permettre de faire du Lazy image loading sans avoir à se taper jQuery:
http://lehollandaisvolant.net/files/scroll.html(
Permalink)
Oros, le 25/07/2013 à 15:59
Ooooh tien ça va me servir ça :-D
```
function OnScrollDiv() {
var elems = document.getElementsByClassName('lazy');
var el = elems[0];
for (var i=0, nb=elems.length ; i <nb ; i++, el = elems[i]) {
var rect = el.getBoundingClientRect();
var isVisible = ((rect.top - window.innerHeight) < 0-200 && (rect.bottom) > 200 ) ? true : false ;
el.style.backgroundColor = (isVisible) ? 'blue' : 'red';
}
}
```
via
http://famille-michon.fr/links/?ra1B7g(
Permalink)