Ive used Paul Irish's excellent infinte scroll on a number of projects before but recently found that I was having issues with ending the scrolling after the last items was retrieved on Hikashop. The issue is due to Joomla's error handling - instead of  returning a 404 'page not found' error response it returns a normal page ok response (200) - it can do this intentionally when it provides a useful user defined 404 error page but can also do this unintentionally as in this case. This behavior is commonly known as a soft 404.

As infinite scroll relies on a 404 error being returned when there are no more pages to stop further processing, the net result is that the scrolling keeps on going. Not a massive issue but one that results in an annoying animated icon appearing when you scroll past the end of the page.

In my opinion this is not necessarily the best way of detecting the 'end of the internets' as it assumes that the 404 error means there are no more pages. I'm sure we all know what assumptions usually lead to. By far the best way to determine if there is no more data is to check the actual data itself.

I initially tried looking at the length of the data returned but found that this was not really suitable as it contained the entire page and was really hard to separate the parts that I required although this is possibly due to my lack of javascript skills more than anything else. After some testing I found that instead of looking at the data length looking at the length of the child elements returned was the way to go. I this way I could detect when no more data was present.

 

To do this I created an additional option and set it to accumulate the length of itemselector child data returned using $('.itemSelectorChildClass').length I then checked this each time that the information was retrieved to see if it's length had increased. If there was no change then no new data had been retrieved so I destroyed the instance.

 

I my opinion a much better way than relying on a 404 as this works regardless of the returned page state.

 

There is however one caveat to this solution; On the page I was returning there was reliable repeatable child data that I could test for. This may not be the case for all pages and may require that you wrap your data in a further block element so that you can implement this.

 

EG

 

<div class="itemSelector">
    <div class="itemSelectorChild">
        Lorem ipsum...
    </div>
</div>

 

To implement this an additional two options need to be added:

 

$.infinitescroll.defaults = {
    //...other options
    state: { 
    //...other state options..
        numSubItems: 0 // variable to count total child items returned
    }
    //...other options
    itemSelectorChild: ".itemSelectorChildClass" // class of itemselector child
}

 

The following code then needs to be added to the end of the _retrieve function

 

//test for increase in number of child items
if (opts.numSubItems === $(opts.itemSelectorChild).length) {
    //no more child items added so lets be done
    state.isDone = true;
    //do end tasks here 
}

//more child items added so update count
opts.numSubItems = $(opts.itemSelectorChild).length;

 

Hope this helps someone else out.

 

DM

 

I added this to the Github issue tracker - https://github.com/paulirish/infinite-scroll/issues/499