Example: Combine Basic & Delayed Loading

In this example we combine the basic usage of Lazy and the delayed loading option. You can scroll through the page to load the images coming up to the viewport. But after the given delay of five seconds Lazy will load the whole rest of the unloaded images at once.

 

Please wait 5 Seconds! 


    <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({
            combined: true,
            delay: 5000
        });
    });

 

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