onBecomesVisibile in Javascript per l'impaginazione senza clic?

Question

c'è qualche libreria javascript che mi fornisce un evento personalizzato non appena un certo elemento diventa visibile nell'area del browser?

l'idea di base è, non appena l'ultimo elemento in un elenco diventa visibile sullo schermo, voglio caricare i successivi 10 elementi in modo che l'utente non debba fare clic sulla pagina successiva " pulsante. per raggiungere questo obiettivo, sarebbe utile un evento onBecomesVisible che si attiva non appena viene visualizzato l'ultimo elemento. c'è qualcosa del genere?

Slashdot esegue il caricamento in prima pagina in questo modo.

Answer 1

Puoi scrivere il tuo semplice plugin usando 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;
 }

E poi usalo in questo modo

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

Lo script legherà fn a ciascuno degli ellementi corrispondenti. La funzione verrà attivata quando uno degli elementi corrispondenti scorre nella vista. Verrà inoltre passata la funzione quale elemento ha generato l'evento.

Nota che non puoi associare questo evento usando live, quindi dovrai ricollegarlo dopo aver aggiunto nuovi elementi (presumendo che tu voglia l'evento anche su quello precedente).

Modifica
Ho sbagliato qui: visibile non ritorna se un elemento non è nella finestra. Tuttavia, ho modificato la fonte, quindi ora controlla se un elemento è nella finestra. La funzione controlla se l'elemento si trova sotto il viewport, supponiamo che se non è al di sotto del viewport sia stato fatto scorrere in vista e che dovremmo eseguire la funzione.

EDIT2
Testato su Google Chrome 1.0, Firefox 3.0.10 e IE7

Answer 2

Potresti voler guardare lo scorrimento infinito:

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

Answer 3

Dustin Diaz (che è davvero molto intelligente e dovresti leggere altre sue cose) nel 2007 ha scritto un articolo su rileva quando un elemento è passato in vista.

Potrebbe essere esattamente quello che ti serve.

Answer 4

Un'idea alternativa è quella di utilizzare sempre una funzione wrapper per visualizzare / nascondere tutto. In altre parole, invece di fare direttamente style.display = 'none'; o $ (" # qualcosa "). Hide (); , usi sempre il tuo funzione a cui si passa l'id dell'elemento.

Quindi, puoi monitorare più facilmente quando un elemento diventa visibile / nascosto e impostare l'esecuzione degli handle degli eventi.