Example: Bottom-To-Top Scrolling

This example shows the basic usage of Lazy. On this page are ten images, but there are only a few loaded within the page itself (as seen on the console). The rest of the images will get loaded when the user scrolls to them and they hit the threshold. 


    <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/6.jpg" />
    <img class="lazy" data-src="images/7.jpg" />
    <img class="lazy" data-src="images/8.jpg" />
    <img class="lazy" data-src="images/9.jpg" />
    <img class="lazy" data-src="images/0.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