jQuery load more data on scroll

Question

I am just wondering how can i implement more data on scroll only if the div loading is visible   Usually we look for page height and scroll height  to see if we need to load more data  but the following example is little complicated then that   Following image is perfect example  there are two  loading div s on the drop down box  When user scroll the content  whichever is visible it should start loading more data for it     So how can i find out if  loading div is visible to user yet or not  So i can start loading data for that div only

User · Answer

Here is an example    On scrolling to the bottom  html elements are appeneded  This appending mechanism are only done twice  and then a button with powderblue color is appended at last     x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt title gt Demo  Lazy Loader lt  title gt  x000D       lt script src  https   code jquery com jquery-3 2 1 min js  gt  lt  script gt  x000D       lt style gt  x000D           myScroll   x000D              border  1px solid  999  x000D            x000D   x000D          p   x000D              border  1px solid  ccc  x000D              padding  50px  x000D              text-align  center  x000D            x000D   x000D           loading   x000D              color  red  x000D            x000D           dynamic   x000D              background-color  ccc  x000D              color  000  x000D            x000D       lt  style gt  x000D       lt script gt  x000D    var counter 0  x000D            window  scroll function      x000D              if    window  scrollTop        document  height   -   window  height    amp  amp  counter  lt  2    x000D                  appendData    x000D                x000D              x000D          function appendData     x000D              var html       x000D              for  i   0  i  lt  10  i      x000D                  html      lt p class  dynamic  gt Dynamic Data    This is test data  lt br   gt Next line  lt  p gt    x000D                x000D                  myScroll   append html   x000D     counter    x000D      x000D     if counter  2  x000D         myScroll   append   lt button id  uniqueButton  style  margin-left  50   background-color  powderblue   gt Click lt  button gt  lt br   gt  lt br   gt     x000D            x000D       lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div id  myScroll  gt  x000D           lt p gt  x000D              Contents will load here     lt br   gt  x000D           lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D           lt p  gt This is test data  lt br   gt Next line  lt  p gt  x000D       lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

The accepted answer of this question has some issue with chrome when the window is zoomed in to a value  100   Here is the code recommended by chrome developers as part of a bug i had raised on the same     window  scroll function       if   window  scrollTop       window  height    gt     document  height            Your code here           For reference   Related SO question  Chrome Bug

User · Answer

I spent some time trying to find a nice function to wrap a solution   Anyway  ended up with this which I feel is a better solutions when loading multiple content on a single page or across a site   Function   function ifViewLoadContent elem  LoadContent                    var top of element     elem  offset   top              var bottom of element     elem  offset   top     elem  outerHeight                var bottom of screen     window  scrollTop     window innerHeight              var top of screen     window  scrollTop                 if  bottom of screen  gt  top of element   amp  amp   top of screen  lt  bottom of element                if    elem  hasClass  ImLoaded                          elem  load LoadContent  addClass  ImLoaded                                            else                  return false                            You can then call the function using window on scroll  for example  you could also bind it to a click etc  as I also do  hence the function    To use     window  scroll function  event            ifViewLoadContent   AjaxDivOne    someFile somecontent html              ifViewLoadContent   AjaxDivTwo    someFile somemorecontent html               This approach should also work for scrolling divs etc   I hope it helps  in the question above you could use this approach to load your content in sections  maybe append and thereby dribble feed all that image data rather than bulk feed   I used this approach to reduce the overhead on https   www taxformcalculator com   It died the trick  if you look at the site and inspect element etc  you can see impact on page load in Chrome  as an example

User · Answer

I suggest using more Math ceil for avoid error on some screen  Because on a few different screens it s not absolutely accurate I realized that when I console log  console log   window  scrollTop       5659 20123123890    And console log  document  height   -   window  height        5660  So I think we should edit your code to   window  scroll function         if Math ceil   window  scrollTop               Math ceil    document  height   -   window  height                      ajax call get data from server and append to the div            Or Allow load data from server before scroll until bottom  if    window  scrollTop    gt      document  height   -   window  height   - 200         Load data

User · Answer

Improving on  deepakssn answer  There is a possibility that you want the data to load a bit before we actually scroll to the bottom   var scrollLoad   true    window  scroll function     if  scrollLoad  amp  amp     document  height   -   window  height   -  window  scrollTop   lt  800          fetch data when we are 800px above the document end     scrollLoad   false                var scrollLoad  is used to block the call until one new data is appended   Hope this helps

User · Answer

You question specifically is about loading data when a div falls into view  and not when the user reaches the end of the page   Here s the best answer to your question  https   stackoverflow com a 33979503 3024226

User · Answer

Have you heard about the jQuery Waypoint plugin   Below is the simple way of calling a waypoints plugin and having the page load more Content once you reaches the bottom on scroll      document  ready function         var  loading       lt div class  loading  gt  lt p gt Loading more items amp hellip  lt  p gt  lt  div gt          footer      footer        opts             offset   100                footer waypoint function event  direction             footer waypoint  remove               body   append  loading             get     more a   attr  href    function data                var  data     data                   container   append  data find   article                  loading detach                    more   replaceWith  data find   more                  footer waypoint opts                      opts

User · Answer

If not all of your document scrolls  say  when you have a scrolling div within the document  then the above solutions won t work without adaptations  Here s how to check whether the div s scrollbar has hit the bottom       someScrollingDiv   on  scroll   function         let div     this  get 0       if div scrollTop   div clientHeight  gt   div scrollHeight               do the lazy loading here

User · Answer

In jQuery  check whether you have hit the bottom of page using scroll  function  Once you hit that  make an ajax call  you can show a loading  image here till ajax response  and get the next set of data  append it  to the div   This function gets executed as you scroll down the page  again     window  scroll function         if   window  scrollTop        document  height   -   window  height                    ajax call get data from server and append to the div

[javascript] jQuery load more data on scroll

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to scroll