Load website data on scrolling Down in browser

Question

my question is that i have a structure of website as

    <div class="span">.......</div>
    <div class="span">.......</div>
    <div class="span">.......</div>
    <div class="span">.......</div>
    <div class="span">.......</div>

these are 100+ loaded form database and working fine.I just want that initially it will show only 5 and then when user scroll down they will show more. thanks

Have you tried anything yet? Can you show us what you tried? — Puroto, Jul 12 '17 at 18:52

score 0 · Answer 1 · answered Jul 12 '17 at 18:18

0

You can refer to this link:

jQuery load first 3 elements, click "load more" to display next 5 elements

There is also an example.

answered Jul 12 '17 at 18:18

Mikael Sauriol Saad

112
1
2
10

in your case, you'll need to put an event on your scrolling, so at like 80% of your div, load more for example. – Mikael Sauriol Saad Jul 12 '17 at 18:19

score 0 · Accepted Answer · answered Jul 12 '17 at 19:00

 <script>
$(document).ready(function () {
  size_li = $(".listingcall .span6").size();
  size_li = $(".listingcall .span6").size();
  x=3;
  $('.listingcall .span6:lt('+x+')').show();
  $(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
x= (x+5 <= size_li) ? x+5 : size_li;
$('.listingcall .span6:lt('+x+')').show();
      }    
 });
});
</script>

Load website data on scrolling Down in browser

2 Answers2