Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

trigger infinite-scroll when there's not enough content for scroll bar on page load

I'm using the great infinite-scroll plugin- http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

But on larger screen resolutions there's not enough posts to display a scroll bar so the infinite-scroll never gets triggered. Wondered if these a way around this without having a large number of initial posts.

Guessing some kind of if statement to check browser height etc. But how do i then trigger the infinite-scroll if it returns true.

Any ideas

Thanks

Ben

like image 241
Ben Avatar asked Jul 12 '12 16:07

Ben


People also ask

Is infinite scroll lazy loading?

Infinite scroll uses lazy loading and executes its demand to load more data (products or content) at the bottom of the page, without requiring an action such as the click of a button. On-demand loading is used to optimize content delivery by reducing time consumption and memory usage.

Why you shouldn't use infinite scroll?

If you're using infinite scrolling on a long page, you're constantly loading more and more content into memory. This will have a negative impact on page performance, since the browser has much more work to do in order to render the page.

How do I load more scrolling data?

In jQuery, check whether you have hit the bottom of page using scroll function. Once you hit that, make an ajax call (you can show a loading image here till ajax response) and get the next set of data, append it to the div. This function gets executed as you scroll down the page again.


1 Answers

One way to go for a quick check would be:

// Force 'retrieve' for next page if window is taller than document
if($(window).height() >= $(document).height()){
$wall.infinitescroll('retrieve');
};

Guess you may need to turn this into a function for multiple 'retrieve' if needed until window is not taller than the document.

like image 187
Luigi Avatar answered Oct 08 '22 05:10

Luigi