Javascript: Infinite scroll

Für mein aktuelles Projekt benötigte ich einen endloses Bildlauf, so wie es beispielsweise bei Twitter oder Facebook gemacht wird. Auf meiner Suche im Internet bin ich auf einige Bibliotheken gestoßen, die ich allerdings nicht benutzen wollte, da ich es für unnötigen Ballast hielt. An den Beispielen im Internet musste ich jedoch feststellen, dass nicht alle Situationen abgedeckt werden, die auch eintreten können. Was passiert beispielsweise bei einem vergrößern des Fensters, wenn noch überhaupt keine Elemente geladen sind oder wenn ein großer Bildschirm verwendet wird, so dass die geladene Anzahl an Elementen den Bildschirm noch nicht ganz füllt?

Ich habe versucht diese Probleme alle abzudecken und daraus eine Art Beispiel zu schreiben.

var moreElements = true;
var fetchCount = 10;

// erster Aufruf beim laden der Seite
$(document).ready(function () {
    InfScroll();
});

// scroll-event
$(window).scroll(function () {
    InfScroll();
});

// resize-event
$(window).resize(function () {
    InfScroll();
});

function InfScroll() {
    if (($(window).scrollTop() == $(document).height() - $(window).height() // am Boden angelangt?
          || $(document).height() < $(window).height()) // Seite kleiner als Bildschirm?
          && moreElements ) // weitere Elemente vorhanden?
        {
        moreElements = false;
        $.getJSON("url",
        function (data) {
            // Elemente einfügen
            for (var i = 0; i < data.length; i++) {
                $("#container").append(data[i]);
            }
            // Sind weitere Elemente vorhanden?
            if (data.length >= fetchCount ) {
                moreElements = true;

                // Ende trotz neuer Elemente noch nicht erreicht? Wiederholen!
                if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                    InfScroll();
                }
            }
        });
    }
}
Bookmark and Share

0 Kommentare:

Kommentar veröffentlichen