CODEWITHSUNDEEP
javascriptjqueryhtml
Ganesh Pawar
Ganesh Pawar

Reputation: 187

Infinite scrolling for fixed number of li elements using jQuery

I've seen lot of infinite scroll but it basically makes an ajax call to the next page and displays that when the window reaches a certain breaking point.

I'm dealing with HTML code that has 100 light-weight li elements already loaded on the page but for UI purposes, we want to lazy-load the divs as they are scrolled to instead of showing them all at once. The basic structure looks something like this : 

<ul class="container">
  <li class="element">one</li>
  <li class="element">two</li>
  <li class="element">three</li>
  <li class="element">four</li>
  <li class="element">five</li>
  <li class="element">six</li>
  <li class="element">seven</li>
        .... 100 times
</ul>

If anyone could suggest me the simplest way to achieve this jQuery functionality.

Upvotes: 4

Views: 2076

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9654

Ok, finally it works as shown in this JSFIDDLE

//initialize
winHeight = $(window).height();
liHeight = $('li.element').height();
next = Math.ceil(winHeight / liHeight);
ulLength = $('li.element').length;
$('html, body').animate({ scrollTop: 0}, 0);

//hide elements not in the view as the page load for the first time
$('li.element').each(function () {
    if ($(this).offset().top > winHeight) {
        $(this).fadeOut(0);
    }
});

//show elements on scroll
$(window).scroll(function (event) {
    scrollPos = $(window).scrollTop();
    if (scrollPos + winHeight == $(document).height()) {
        $('#li' + next).fadeIn();
        next++;
    }
});
* {
    padding:0;
    margin:0;
}
.container {
    padding:0;
    list-style-type:none;
}
li.element {
    height:100px;
    background-color:#BBB;
    border-bottom:1px dotted gray;
    font-size:3em;
    padding-top:10px;
    text-align:center;
    color:#444;
    text-shadow:#222 0 1px 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
    <li id="li1" class="element">1</li>
    <li id="li2" class="element">2</li>
    <li id="li3" class="element">3</li>
    <li id="li4" class="element" style="height:300px;">4</li>
    <li id="li5" class="element">5</li>
    <li id="li6" class="element">6</li>
    <li id="li7" class="element">7</li>
    <li id="li8" class="element">8</li>
    <li id="li9" class="element">9</li>
    <li id="li10" class="element">10</li>
    <li id="li11" class="element">11</li>
    <li id="li12" class="element">12</li>
    <li id="li13" class="element">13</li>
    <li id="li14" class="element">14</li>
    <li id="li15" class="element">15</li>
    <li id="li16" class="element">16</li>
    <li id="li17" class="element">17</li>
    <li id="li18" class="element" style="height:600px;">18</li>
    <li id="li19" class="element">19</li>
    <li id="li20" class="element">20</li>
    <li id="li21" class="element">21</li>
    <li id="li22" class="element"> and so on till 100 </li>
</ul>

Upvotes: 2

Related Questions