onBecomesVisible en Javascript pour pagination clickless?

Question

Y at-il une bibliothèque javascript qui me fournit un événement personnalisé dès qu'un certain élément devient visible dans le canevas du navigateur?

l'idée de base est, dès que le dernier élément d'une liste devient visible sur l'écran, je veux charger les 10 éléments suivants afin que l'utilisateur n'a pas besoin de cliquer sur le bouton "page suivante". pour ce faire, un événement onBecomesVisible qui se déclenche dès que le dernier élément est affiché serait utile. Y a-t-il quelque chose comme ça?

Slashdot fait-il le chargement de la première page de cette façon.

Answer 1

Vous pouvez écrire votre propre plugin simple en utilisant jQuery.

$.belowViewport = function(elem){ 
    var port = $(window).scrollTop() + $(window).height(); 
    return port <= $(elem).offset().top; 
} 

$.fn.onBecomeVisible = function(fn){ 
    var obj = this; 
    $(window).scroll(function() { 
    obj.each(function() { 
    if(!$.belowViewport(this) && !$(this).data('scrollEventFired')){ 
    $(this).data('scrollEventFired', true); 
    fn(this); 
    } 
    }); 
    }); 
    return this; 
} 

Et puis l'utiliser comme ceci

$('.elements:last').onBecomeVisible(function(elem){ loadNewElems(); }); 

Le script va se lier fn à chacun des ellements correspondants. La fonction sera déclenchée lorsque l'un des éléments correspondants défilera dans la vue. La fonction sera également transmise à l'élément qui a déclenché l'événement.

Notez que vous ne pouvez pas lier cet événement en direct, vous devrez donc le relier après avoir ajouté de nouveaux éléments (en supposant que vous souhaitez que l'événement soit également présent sur le dernier de ces événements).

EDIT
je me suis trompé ici,: visible ne retourne pas si oui ou non un élément est dans la fenêtre. Cependant j'ai édité la source ainsi elle vérifie maintenant si un élément est dans la fenêtre d'affichage. La fonction vérifie si l'élément est en dessous de la fenêtre, nous supposons que si elle n'est pas en dessous de la fenêtre, elle a été déplacée dans la vue et que nous devrions exécuter la fonction.

EDIT2
testé ce en chrome 1.0 Google, Firefox 3.0.10 et IE7

Answer 2

Vous pouvez regarder le défilement sans fin:

http://plugins.jquery.com/project/endless-scroll

Answer 3

Dustin Diaz (qui est vraiment très intelligent, et vous devriez lire la suite de ses affaires) a écrit un article en 2007 sur detecting when an element has scrolled into view.

Peut-être exactement ce dont vous avez besoin.

Answer 4

Une autre idée est d'utiliser toujours une fonction wrapper pour afficher/cacher tout. En d'autres termes, au lieu de faire directement style.display='none'; ou $("#something").hide();, vous utilisez toujours votre propre fonction à laquelle vous passez l'ID de l'élément. Ensuite, vous pouvez plus facilement suivre lorsqu'un élément devient visible/masqué et définir des poignées d'événement à exécuter.