Facebook Like Automatic Content Loading on Scrolling

We have all seen the automatic content loading used in Facebook. Let’s see how easily it can be implemented using jQuery.

View Demo

What we do to achieve this is whenever a scroll event is fired, check if we have reached the bottom of the page, and if we are at the bottom, call our ajax function to load the content.

 

 

.scroll() is fired every time the user scrolls the page.
$(window).scrollTop() returns the number of pixels hidden ‘above’ when the page is scrolled.
$(window).height() gives the height of the window. Same as window.innerHeight
$(document).height() gives the total height of the page.

Well, that’s that. Cool, right?

Facebook content Loading

Automatic Content Loading in Facebook

Incoming search terms:


  • Worked good to me. I had used some part from this too: http://tomsbigbox.com/wordpress-load-more-posts-on-page-scroll/
    all php was from there (because i wanted to load wordpress posts), and i had used the “halfway” variable too and to load post in the middle of the page, not in the end only.
    Your post was very useful to me, thank you!

  • George

    What about the ajax_processor.php file? What does it contents?, btw great post.

  • Saurabh

    @George, thanks 🙂 ajax_processor.php is just a simple file that generates random paragraphs of text and outputs it. I put it so new random content is shown each time page is scrolled. Try opening that file in browser here -> http://rebugged.com/code/auto-content-loading-on-scroll/ajax_processor.php

  • Would this work in an iFrame – ie a Facebook application?

    Thanks

  • Chayan

    what will happen when the content is finished.

  • Jsx

    In the case of this example, the content will neverffinish, as we are dynamically generating content.

  • Chayan

    But in my case, the content will finished. Could you pls help me to solve this situation.

  • Jsx

    If you are using a limit query to fetch the content, once the content is finished, the limit query will be returning null. So you can check if the ajax call is returning null or empty string and do the appropriate action.

  • Mairaj Saifi

    It is working on mobile version or not??

  • Jsx

    It worked on Firefox in my Firefox OS simulator. So it should work in the Firefox OS device also. Haven’t checked in Android.

  • Mairaj Saifi

    its not working in iphone. what can i do. please reply me asap.

  • Jsx
  • Mairaj Saifi

    no its not working properly but i found a solution for iphone by using this code :

    if ($(window).scrollTop() >= $(document).height() – $(window).height() – 60) {

  • Jsx

    What is that “60”? Be careful anyway, as it probably this will stop working correctly when the screen size or something change. Thanks for sharing.

  • Pingback: Datenbankinhalte erst bei Bedarf laden - php.de()

  • vannaibell

    thanks you !

  • i am trying to using AJAX in my website where products should be love when user goes end of page.

    But it doesn’t work
    any One
    help me

  • Prakesh

    where is down option and code

  • This is the best solution! No need other jQuery plugin to do this. You save my day. Thanks for sharing!

  • Hemz

    Awesome.!

  • Fábio Monteiro

    How is your loadMore php code? I’m doing the same thing, but I’m with a little bit trouble my content is cloned when I update it…I’d like to know how I don’t clone the actual content…