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 thoughts on “Load more content as the user reaches the bottom of your page, with jQuery”

    1. 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 */
      })

  1. 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.

    1. 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.

  2. 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.

    :)

    1. 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.

  3. 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 *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>