Example: Heavy Usage

In this simple example Lazy has to handle 300 images in a single instance. Just scroll through the page or use your scrollbar to jump and see how it works. 


    <img class="lazy" data-src="images/1.jpg" />
    <img class="lazy" data-src="images/2.jpg" />
    <img class="lazy" data-src="images/3.jpg" />
    <img class="lazy" data-src="images/4.jpg" />
    <img class="lazy" data-src="images/5.jpg" />
    <!-- ... -->
    <img class="lazy" data-src="images/296.jpg" />
    <img class="lazy" data-src="images/297.jpg" />
    <img class="lazy" data-src="images/298.jpg" />
    <img class="lazy" data-src="images/299.jpg" />
    <img class="lazy" data-src="images/300.jpg" />
                  

    img.lazy {
        width: 700px; 
        height: 467px; 
        display: block;
    }
                  

    $(function() {
        $('.lazy').lazy();
    });

 

Note: All examples verbose their actions to the sidebar on the left and even to your browsers console by console.log. Check the output there (hit F12 key to open your browsers dev tools).

Demonstration