Infinite Scrolling

As the User scrolls down the page, an ajax call is fired that will fetch the next set of data from the database and render it on the page. This will continue as you scroll down until all the data is fetched from the database.

As you know, nowdays the Users require large amount of data in minimum amount of time. And this can be handled by using some techniques for e.g Caching, Loading data when required and so on.


In this article we will learn how to implement infinite scroll, similar to the one implemented in Facebook, using jQuery.


Infinite scroll can be done in two ways :

  1. Using existing jquery event i.e scroll

    $(window).scroll(function() {
    // Once scroll limit is reached, the event is fired
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    // call you Ajax function here 
    }
    });

  2. Using waypoint.
    Whenever you scroll to an element the ajax function will be called
    $('.element').waypoint(function(direction) {
    // call you Ajax function here 
    });

    For more details you can refer to this link (http://imakewebthings.com/jquery-waypoints/)

    Ajax function

    $.ajax({
    url: indexAction,
    type: "GET",
    data: {
    page: pageNo + 1
    },
    success: function(response) {
    // if result is empty, then return and stop infinite scrolling
    isEmpty = $(response).find('.isEmpty');
    if (isEmpty.length > 0) {
    // isLoading make it to true to stop infinite scrolling
    isLoading = true;
    return;
    }
    // otherwise append result, increase page no
    $(response).append(newData);
    // increment page
    pageNo = pageNo + 1;
    }
    });

    How it works:


    As the User scrolls down the page, an ajax call is fired that will fetch the next set of data from the database and render it on the page. This will continue as you scroll down until all the data is fetched from the database.

    The same technique can be applied to implement pagination where the next set of records would be fetched on click of some link.

    This will help in improving the performance of the system as all data is not loaded on the first load of the page.
Categories: Flow Framework

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.