Deferred loading of page content using JavaScript or jQuery

Question

I have seen a few websites where their home page is too big and when user scroll down to read the content at the end of the page then a few areas of that page load dynamically. How do they design their page?

As an example the site is http://blog.rainbird.me/ where you can see the effect. How can it be achieved it via jQuery and Ajax?

Answer 1

You do it like this:

1: figure out the maximum browser height for your users (it's probably safe to assume 1920px as very few users have larger than 2560x1920 displays)

2: render your list so it is slightly longer than the 1920px, you can even double it to have a safe margin

3: hook into the scroll event on the document $(document.body).scroll(myScrollHandler)

4: when document.body.scrollTop gets close enough to document.body.scrollHeight you append more data on your page

$.get(urlToGetMoreDataFrom,function(data){ $(document.body).append(data)});