Comments on: Load Content While Scrolling With jQuery

By: Eric Kerr

Eric Kerr — Tue, 16 Feb 2010 19:41:02 +0000

Not having the content listed in the HTML for search engines is horrible for SEO.

This approach is fine for images (which produce little SEO benefit), but I would never use it for loading additional content.

If you somehow sniffed the USER_AGENT for google/bing/etc. bots, and displayed all of the content for search engines to index, then it might be a plausible solution.

By: Andrew Spratley

Andrew Spratley — Sun, 31 Jan 2010 22:45:25 +0000

@umut I found using == would only fire if you were at exactly that scroll position and when I was testing it the event didn’t seem to get fired reliably (if you scrolled too fast or jumped to the bottom somehow), using > means it will fire anytime you’re in the bottom section. I also prefer setting it as a percentage as it doesn’t matter how large the window is, your buffer area should be proportional.

By: Umut M.

Umut M. — Sun, 31 Jan 2010 19:28:43 +0000

@Andrew,

You can also add a small equation to the code above to fire the load event anytime you want:

Just change:
if ($(window).scrollTop() == $(document).height() – $(window).height()){

if ($(window).scrollTop() -20 == $(document).height() – $(window).height()){

would fire the event when you’re 20px close to the bottom.

By: Andrew Spratley

Andrew Spratley — Sun, 31 Jan 2010 17:32:26 +0000

I’ve made some changes to the code that only make one request at a time and to call the update before the scroll gets right to the bottom. The changes are here if you want to see: http://learninglamp.wordpress.com/2010/01/30/endless-scrolling-with-jquery/ . I’ve only tested this in FF on a Mac, the demo pulls live images from Flickr so I can’t guarantee they’re all “safe”.

@Robert have you tried a lazy loader solution: http://www.appelsiini.net/projects/lazyload

By: Robert Brown

Robert Brown — Tue, 15 Dec 2009 12:01:38 +0000

Can anyone tell me if it is possible to do this scrolling from left to right rather then down the page?

We have a large map that I would like load in sections but only download the section which the visitor wishes to see.

By: Nitesh Sharma

Nitesh Sharma — Fri, 11 Dec 2009 06:50:52 +0000

Hi i want to apply the same thing on iframe such that scrolling the iframe loads the rest og the content.Is that possible using this jquery script?

By: Jeff

Jeff — Wed, 02 Dec 2009 00:03:54 +0000

Yeah, this demo has a bit of a bug where if the scroll event fires multiple time before the AJAX is finished doing it’s thing (think scrolling up and down at the end of the page) it will fire several times.

By: Joakim

Joakim — Sat, 31 Oct 2009 09:48:59 +0000

Hi, I am looking at your demo with MSIE 8.0 and onces it starts to scrool with the mousewheel, it creates dupes of every 5 records?

By: Shahriar Hyder

Shahriar Hyder — Mon, 12 Oct 2009 05:11:37 +0000

Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

By: aaron

aaron — Mon, 28 Sep 2009 17:57:41 +0000

got it….

create a div: Load more

then add this inside of the document.ready function:

var loadMore = $(‘#more’);
loadMore.click(function(){
lastPostFunc();
});

I removed the scrolling function because my mouse scroll wheel would execute the same query 4 times in a row.