jQuery how to use lazy load to load more content on scroll

Question

Hi I am trying to use lazy load in my page. In first look it will display first 3 div child . Then after scroll it will increase according to size. I have tried some click on action to load more . but I want to add functionality on scroll. Below my code

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

you basically have to listen to the scroll event, check how much is nelow the fold, and then load your content: distanceToBottom = $(document).height() - $(window).height() - $(window).scrollTop(); — mbehzad
– mbehzad, Commented Sep 13, 2017 at 8:30
@user2520818 Thanks for ur comment. Can u please share me a sample in jsfiddle. — Lemon Kazi
– Lemon Kazi, Commented Sep 13, 2017 at 8:32
you can try some 3rd party plugins, libs: jQuery.Lazy or jscroll — NguaCon
– NguaCon, Commented Sep 13, 2017 at 8:32
@NguaCon I am trying but not succeed. It will better if u can share a sample. — Lemon Kazi
– Lemon Kazi, Commented Sep 13, 2017 at 8:36
You can see demos in ressio.github.io/lazy-load-xt/demo/index.htm; jquery.eisbehr.de/lazy/#examples — NguaCon
– NguaCon, Commented Sep 13, 2017 at 8:44

Piyush · Accepted Answer · 2017-09-15 06:32:18Z

Edited snippet using jQuery scroll event is as follows. If you need to achieve anything different please let know.

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    var heightVal = $('#myList').height();
    $('#myList').css('max-height', heightVal-1);
    $('#myList').bind('mouseover',function(){
         $('#myList').css('overflow-y', 'auto');
    });
    $( "#myList").scroll(function() {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
		});
    /*$('#loadMore').click(function () {
        
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });*/
});

#myList {
  /*max-height : 100px;*/
  overflow-y : hidden;
}

#myList li{ 
  display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

Thanks for your answer. Here it's looking little bit odd when i use overflow y in main div.
@LemonKazi I have edited the code snippet above to show scroll bar on the mouseover event. Please note that we are trying to achieve this using overflow
That was nice. I applied on my application. It's working on jsfiddle but not on my live page. Can u suggest me why?

Collectives™ on Stack Overflow

jQuery how to use lazy load to load more content on scroll

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related