Press "Enter" to skip to content

Load more content as the user reaches the bottom of your page, with jQuery

I recently built a project gallery for Primal Screen’s new website (not live yet). Instead of having the traditional < 1 2 3 4 5 > pagination setup, we decided to take a leap forward into the the world of modern browsers, ajax, and users with very short attention spans. In this on-demand world, we load the content as needed: when the user hits the bottom of page one, page two is loaded and appended, and so on until you run out of content, or the user’s scroll wheel breaks. It’s a never ending page, without a never ending load. You may have seen this functionality in the Firefox plugin, AutoPager, or the Chrome/Safari plugin AutoPagerize.

Anyway, basically it works like this:
1) User loads page with 15 thumbnails on it
2) User scrolls to bottom of page, triggering a jQuery event we set up
3) 15 more thumbnails appear like magic or voodoo or mindreading or something and the page gets longer! Without even clicking!
4) User scrolls some more, hits bottom of page again, jQuery event fires again and
5) 15 more thumbnails appear and the page gets longer, further blowing the user’s mind!
6) ?
7) Profit.

alreadyloading = false;
nextpage = 2;

$(window).scroll(function() {
	if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
		if (alreadyloading == false) {
			var url = "page"+nextpage+".html";
			alreadyloading = true;
			$.post(url, function(data) {
				$('#galleryThumbsCol').children().last().after(data);
				alreadyloading = false;
				nextpage++;
			});
		}
	}
});

Line 1 is a state variable. We set it to true when we start loading a new page, false when it's loaded and shown, and before we load a new page we check to make sure the variable is set to false to ensure that we don't try to load page three before page two is done loading.
Line 4 Standard jQuery scroll event. This fires several times per second when scrolling in a modern browser, but on old browsers it just fires once when you stop scrolling.
Line 5 Here we check to see if the user is at the bottom of the page.
Line 6 Here we check to make sure we aren;t already loading a page.
Line 7 This is where the magic happens. $.post is a jQuery function that loads the url you give it in it's first parameter, and runs the callback function you give it in it's second parameter (and that function get's the loaded data in it's one and only parameter, did you follow all that?).
Line 8 Now that we have the loaded page, we have to put it in our existing page. Translated to english, this line reads "find the element with the ID: galleryThumbsCol, find it's last child, and put the loaded data in after that child.
Line 9, 10 Then we set our variables so we're ready to load the next page.

13 Comments

  1. Cameron Brown Cameron Brown March 20, 2011

    Thanks! That *was* helpful… Needed the event for scrolling to the bottom of the page – this worked fine.

  2. Nancy Nancy October 2, 2011

    Thanks for the share!
    Nancy.R

  3. Malz Malz October 12, 2011

    Thanks a lot. Been looking everywhere for this.

  4. Soum Soum May 3, 2012

    Hi and thanks a lot :c)
    But if i want add an event on click ?

    • Chris Silich Chris Silich June 21, 2012

      If you want to have it load when you click an element, rather than when you scroll to the bottom of the page, then change this

      $(window).scroll(function() {
      if ($(‘body’).height() <= ($(window).height() + $(window).scrollTop())) { /* code removed */ } }); to this $("#elementyouwanttoclickon").click(function(e) { e.preventDefault(); // if the element is a link, this stops the browser from trying to follow that link to wherever it goes. /* code removed */ })

  5. Timi Timi May 31, 2012

    This doesn’t work if the users browser is larger than your content since the user can’t scroll, no function is called loading the additional content.

    • Chris Silich Chris Silich June 19, 2012

      That is correct. I suppose you could use jQuery to check the window height and the body height, and if the window is bigger than the body go ahead and do the first auto-load, or show a link for the user to do it manually.

    • Asad Asad August 22, 2012

      You can use a div and use Click function to laod data for large screen users :)

  6. Shantanu Shantanu December 3, 2012

    Hey there,

    Its working perfectly as expected !! I have a suggestion , if you could add loader image like facebook then it will be good. But its nice and working properly.

    :)

  7. Az3l Az3l December 30, 2012

    Ha. Whenever I try to use this it appends the whole page and breaks my layout.

    • Chris Silich Chris Silich January 16, 2013

      Yes, you have to have a different version of the page, just for ajax calls, which leaves out any templating you don’t want duplicated.

  8. Daniël W. Crompton Daniël W. Crompton January 2, 2013

    Tried it out, was getting $('body').height() == 0, so I changed it to $(document).height()

  9. Stefano Corsi Stefano Corsi March 11, 2013

    Thank you thank you Chris. It works perfectly. And thanks to Daniël W. Crompton as well for the solution regarding $(document).height().

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: