Lazy Loading

by aybalasubramanian

HTML

<ul id="yourlist">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="yellow">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="blue">list item</li>
<li class="green">list item</li>
<li class="green">list item</li>
<li class="green">list item</li>
<li class="green">list item</li>
<li class="green">list item</li>
<li class="green">list...

CSS

.yellow {background:yellow;}
.blue {background:blue;}
.green {background:green;}

JavaScript

$(document).ready(function(){

    $("#yourlist li").slice(20).hide();
    
    var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 10) {
                            $("#yourlist li").slice(mincount,maxcount).fadeIn(1200);

mincount = mincount+20;
maxcount = maxcount+20

}
});



});