Example: Load Background Images

By default Lazy will use <img /> tags to load the src attribute. But there is also a way now to use Lazy with other html tags and load the image by background-image CSS attribute. Just use Lazy the way you would do on normal image tags. 


    <div class="lazy" data-src="images/1.jpg"></div>
    <div class="lazy" data-src="images/2.jpg"></div>
    <div class="lazy" data-src="images/3.jpg"></div>
    <div class="lazy" data-src="images/4.jpg"></div>
    <div class="lazy" data-src="images/5.jpg"></div>
    <div class="lazy" data-src="images/6.jpg"></div>
    <div class="lazy" data-src="images/7.jpg"></div>
    <div class="lazy" data-src="images/8.jpg"></div>
    <div class="lazy" data-src="images/9.jpg"></div>
    <div class="lazy" data-src="images/0.jpg"></div>
                  

    div.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