2009-05-08 7 views
1

Gibt es eine JavaScript-Bibliothek, die mir ein benutzerdefiniertes Ereignis zur Verfügung stellt, sobald ein bestimmtes Element im Browser-Canvas sichtbar wird?onBecomesVisible in Javascript für Clickless Paginierung?

Die Grundidee ist, sobald das letzte Element in einer Liste auf dem Bildschirm sichtbar wird, möchte ich die nächsten 10 Elemente laden, so dass der Benutzer nicht auf die Schaltfläche "nächste Seite" klicken muss. Um dies zu erreichen, wäre ein Ereignis onBecomesVisible, das ausgelöst wird, sobald das letzte Element angezeigt wird, praktisch. Gibt es so etwas?

Slashdot lädt seine Front-Seite auf diese Weise.

Antwort

7

Sie könnten Ihr eigenes einfaches Plugin mit jQuery schreiben.

$.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; 
} 

Und dann ist es wie dieser

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

verwenden Das Skript zu jedem der angepassten ellements binden fn. Die Funktion wird ausgelöst, wenn eines der übereinstimmenden Elemente in die Ansicht scrollt. Die Funktion wird auch übergeben, welches Element das Ereignis ausgelöst hat.

Beachten Sie, dass Sie dieses Ereignis nicht mithilfe von Live binden können, sodass Sie es nach dem Hinzufügen neuer Elemente erneut binden müssen (vorausgesetzt, dass Sie das Ereignis auch auf dem letzten dieser Elemente haben möchten).

EDIT
ich hier falsch, Sichtbar nicht, ob zurückgibt oder nicht ein Element im Ansichtsfenster. Allerdings habe ich die Quelle bearbeitet, so dass jetzt überprüft wird, ob sich ein Element im Ansichtsfenster befindet. Die Funktion prüft, ob das Element unterhalb des Ansichtsfensters liegt, wir nehmen an, dass es, wenn es nicht unter dem Ansichtsfenster liegt, in die Ansicht gescrollt wurde und dass wir die Funktion ausführen sollten.

EDIT2
diese Getestet in Google Chrome 1.0, Firefox 3.0.10 und IE7

+0

+1, das ist ziemlich toll, wenn es funktioniert. (die Schreibweise von scroll korrigiert) - aus, um es auszuprobieren. – cgp

0

Eine alternative Idee ist für die Anzeige/Ausblenden alles immer eine Wrapper-Funktion zu verwenden. Mit anderen Worten, anstatt style.display='none'; oder $("#something").hide(); direkt zu verwenden, verwenden Sie immer Ihre eigene Funktion, an die Sie die ID des Elements übergeben.

Dann können Sie leichter verfolgen, wenn ein Element sichtbar/ausgeblendet wird, und Ereignishandles festlegen, die ausgeführt werden sollen.

+0

Nein, er sucht nach einem Ereignis, das ausgelöst wird, sobald ein Element gescrollt wird, nicht wenn es eingeblendet wird. –