Tester si l'élément est visible dans la fenêtre

Bonjour, je développe actuellement un photo viewer comme facebook, chargement des images au scroll ( enfin c'est ce que je pensais au début ), mais impossible de trouvé la bonne fonction.
Dans mon raisonnement voilà comment ca ce passe :
6 images sont chargées avec un élément caché à la suite, quand l'utilisateur arrive à cet élément 6 images supplémentaires sont chargées et ainsi de suite.
Mon problème est que je n'arrive pas à détecter quand l'élément est visible sans passer par une fonction qui test quand la scroll bar passe dessus.
Avez-vous une idée ?

Bonjour.

Nativement je ne crois pas qu'il existe un event JS pour savoir quand un élément apparait dans la fenêtre.
Je pense donc qu'il faille le coder toi-même, avec comme tu l'as précisé la position de la scrollbar, la hauteur de ta fenêtre et l'offset de ton élément.

Après il existe déjà probablement des snippets tout fait, Google est ton ami...

EDIT: à voir ces deux liens :
https://github.com/morr/jquery.appear
http://remysharp.com/2009/01/26/element-in-view-event-plugin/
Modifié par SolidSnake (10 Sep 2013 - 17:29)

Merci pour ta réponse mais j'ai déjà testé ces 2 fonctions et le problème est toujours le même si la scroll ne bouge pas l'action ne ce passe pas.
Imaginons que mon script charge 6 images mais que l'écran peu en contenir 12, il va charger sans problème les premières mais vu que la scroll ne va pas bouger il n'ira pas chercher si l'élément qui déclenche l'action est visible ou non.

Edit : pour te donner un meilleur exemple va sur le profil de facebook de quelqu'un qui a beaucoup de photo met toi dans le plus petit pourcentage d'affichage sur ton navigateur ( 25%) et regarde ce qui ce passe.

Peut-être du lazy loading avec un paramètre de temps plutôt que d'affichage..?

epic3000 a écrit :
Merci pour ta réponse mais j'ai déjà testé ces 2 fonctions et le problème est toujours le même si la scroll ne bouge pas l'action ne ce passe pas.

Alors je te dirais bien de tricher au chargement de ta page, tu simules un window.scroll, ça va peut-être marcher.