How to show a "loading" gif image on top of a image placeholder during lazyload

Question

I am using this jQuery plugin to lazy-load my images. Lazy Loader

It is working fine. I just want to show a "loading" image (gif maybe) on top of all those image which are not loaded yet, which disappears when the image loads.

Any idea how to do this.

FYI: I am using a 1x1 gif image as a placeholder.

Solution 1

I make demo project for above your requirement this is working fine for me please use following code for that.

In Head:

<script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(function () {
                $("img.lazy").lazyload({
                    event: "sporty"
                });
            });
            $(window).bind("load", function () {
                var timeout = setTimeout(function () { $("img.lazy").trigger("sporty") }, 5000);
            }); 
        });
    </script>
    <style type="text/css">
        #container
        {
            height: 600px;
            overflow: scroll;
        }
    </style>

Body :

<div id="container">
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="bmw_m1_hood.jpg" /><br />
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="bmw_m1_side.jpg" /><br />
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="viper_1.jpg" /><br />
        <img class="lazy" width="765" height="574" src="loadingcirclests16.gif" data-original="viper_corner.jpg" /><br />
    </div>

Solution 2

I worked with the Lazy Load in Wordpress theme. And tried the following solution for animated loader.

1. As image placeholder I used a small 64x64 gif with transparent background.
   Image

2. I set the CSS style for the image so that it has a colored background and a loader GIF as background-image.

   .lazyload{
       background-color:#555;
       background-image:url(loader.gif);
       background-repeat:no-repeat;
       background-position:center;
   }
   

   Image

3. Run the script

   $("img.lazyload").lazyload({
       effect : "fadeIn"
   });
   

   or for newer version of plugin:

   lazyload();
   

It should replace the colored background and the loader image with the scr attribute. And the background styles will not have effect on the image.

CodePen.

Comments

[web-nomad]

Thanks for your effort! What is the size of loadingcirclests16.gif?

[Rony SP]

size of loadingcirclests16.gif small. i have also confuse about that how i can take different height and width of this image.

[web-nomad]

That's exactly where i am stuck...i have a loader of size 16x16px...but i put it there, it takes the size of 765x574 just as in your example.

[mortalis]

What exactly? Does the loader animation and background show? Or the Lazy Load doesn't replace the placeholder with the URL?