27

How to load the content while user scroll the web page. How to implement this?

gdoron
  • 147,333
  • 58
  • 291
  • 367
gourav
  • 1,397
  • 5
  • 20
  • 31
  • 2
    Possible duplicates: http://stackoverflow.com/questions/183782 http://stackoverflow.com/questions/1464968 http://stackoverflow.com/questions/3283669 http://stackoverflow.com/questions/3584088 Though Dutchie's answer below is better than any of the answers on those pages. – BlueRaja - Danny Pflughoeft Feb 16 '11 at 18:19

7 Answers7

40

Generally speaking, you will need to have some sort of structure like this

....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>

Then, you will need to detect when you are getting close to the end of the page, and fetch more data

 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           AddMoreContent();
      }
 });    

 function AddMoreContent(){
      $.post('getMoreContent.php', function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });
 }

You may need to keep a javascript variable called something like lastId which stores the last displayed id and pass that to the AJAX receiver so it knows which new content to return. Then in your AJAX you could call 

      $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });

I did exactly this on my company's search page.

Marek Grzenkowicz
  • 17,024
  • 9
  • 81
  • 111
Dutchie432
  • 28,798
  • 20
  • 92
  • 109
  • 1
    the `#placeholder` isnt necessarily necessary depending on the DOM structure, but this is essentially how i have done it before. – Jeff Feb 16 '11 at 18:19
  • correct. if the entire content is already in a div, you can use `.append()` or something to that effect. – Dutchie432 Feb 16 '11 at 18:20
  • also, you may want to add a buffer so instead of reaching the exact bottom, you only need to get within 200px of the bottom. some browsers get a little funky with scrolling and even my mouse will jump around too. adding the buffer alleviates some of these quirks. – Jeff Feb 16 '11 at 18:20
  • @gourav It sounds like you need help on AJAX in general. Are you familiar with AJAX at all? If not, there are lots of posts here to help you get started (http://stackoverflow.com/questions/tagged/ajax). Also read up: http://api.jquery.com/jQuery.ajax/ and http://en.wikipedia.org/wiki/Ajax_(programming) – Dutchie432 Feb 16 '11 at 18:25
  • What if, in addition to this solution, you added some information to the hash so that the user has a "saved state" for when they return to the page after following a link or refresh? When they return, you can use the hash information to load up to the previously scrolled-to content. Then they don't have to scroll/wait, scroll/wait, etc... – Beez Aug 16 '11 at 13:12
  • That might work in some cases, but if you think of Facebook, your initial load times would be huge, and eventually you would just be loading the page in its entirety anyway - therefore making this practice moot. – Dutchie432 Aug 16 '11 at 14:30
15

Just to expand on Dutchie432. In my experience the

if ($(window).scrollTop() == $(document).height() - $(window).height())

may not be true consistently( personally i couldnt make it true cause it was jumping numbers ).
Also, if the user scrolls up and down it could fire many requests , while we are waiting for the first ajax call to return.

So what i did to make it work, was to use >= instead of == . Then, unbinding the scrollTop before making my ajax request. Then binding it again if the ajax has returned any data (which means there may be more).

Here it is 

<script type="text/javascript">
  $(document).ready(function(){                
        $(window).bind('scroll',fetchMore);
   });

   fetchMore = function (){
       if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
           $(window).unbind('scroll',fetchMore);
            $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
            function(data) {
               if(data.length>10){
                    $(data).insertBefore($('#moreHolder'));
                    $(window).bind('scroll',fetchMore);
               }
            });
        }
   }
</script>

`

patrox
  • 408
  • 3
  • 11
  • 2
    I found the ideas in this answer definitely improved Dutchie432's great answer. – Craig Nakamoto Oct 17 '12 at 17:04
  • I would like to fetch the data when scroll is near to end, even 300 doesn't work for me. It triggers only when I reach end of the page – Jerry Jan 20 '17 at 13:13
7

You are referring to Dynamic Progressive Loading.

Is a pretty well documented concept and there is even some built-in support for it from different libraries. JQuery actually has a GridView that supports progressive loading pretty easily for example.

You will need to utilize AJAX to implement this feature.

Matthew Cox
  • 13,566
  • 9
  • 54
  • 72
6

You can use window.addeventlistener to track the scrolling behavior the webpage and load more content to the page when the user is at the foot of the webpage.

document.documentElement.scrollTop, document.documentElement.clientHeight and document.documentElement.scrollHeight will help you achieve this goal.

for example:

window.addEventListener('scroll',()=>{
  const {scrollTop,clientHeight,scrollHeight} = document.documentElement;
  if ((scrollTop+clientHeight)>=scrollHeight) {
    getContent((current_page+1));
  }
});
John Chioma
  • 61
  • 1
  • 1
  • finally! among of thousands jQuery snippets one that uses plain js, exactly what i was looking for. – Sentouki Oct 01 '21 at 17:39
2

You can use jscroll a jquery plugin

http://jscroll.com/

Lazik
  • 2,480
  • 2
  • 25
  • 31
0

You can use some library like jQuery to retrieve the content , then append it to the page content, Or you can use some jquery plugin like this: http://gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/

terry
  • 301
  • 3
  • 17
0
//Vanilla JS
let isLoaded = false;
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 350 ||
document.documentElement.scrollTop > 350
) {
if (!isLoaded) {

}
} else {

}
}

//jQuery
var isLoaded = false;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height  > 350) {
    if(!isLoaded){

    }
}
});
Aleksey Karcev
  • 1
  • 2