Example: Show a Loading Image

If you want to, you can show a loading animation before/while loading the images. One way is to set a base64 image string within the placeholder parameter on initialize Lazy, so the plugin will set the placeholder as background on every element.

Optionally you can just place the loading image as background to your elements with CSS.

In this example the start of Lazy is delayed by 5 seconds, so you can see the loading image before. 


    <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;
        
        /* optional way, set loading as background */
        background-image: url('images/loading.gif');
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
                  

    // plugin build-in placeholder management
    $(function() {
        $('.lazy').lazy({
            placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
        });
    });

 

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