Search code examples
javascriptjqueryinfinite-scrolljquery-waypoints

Waypoints.js, how to re-do the initial check?


I'm building a site where I need a table that I can scroll down until there is no more content but it will only query about 50 entries at a time. So it's sort of infinite-scroll.

The problem I'm having now is that I want to re-do the initial check that Waypoints.js does when initializing a new waypoint:

"When a waypoint is created, one of the steps in the process is to check if the waypoint has already been passed in the down direction. If it has, the waypoint handler is immediately triggered." - http://imakewebthings.com/waypoints/api/enabled-option/

The reason I want to do this is because lets say I set the size of fragment to 25 and it does not fill the whole screen I will never trigger a waypoint event and get more entries.

I managed to fix this by doing this:

function initWaypoint(){
    if($waypoint){
        $waypoint.destroy();
    }

    $waypoint = $("#waypoint").waypoint(function(){
        queryFragment();
    },{
        offset: 'bottom-in-view'
    })[0];
}

It queries more fragments until the screen is filled but it is wee bit too dirty of a solution for my liking. Still, gets the job done and didn't cause any performance issues for me. Is there a better way of doing this?


Solution

  • How you're doing it is exactly how the Waypoints Infinite Scroll shortcut handles it, by destroying the waypoint and then reinitializing the waypoint once new items are loaded.