2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
web-nomad
  • 6,003
  • 3
  • 34
  • 49

2 Answers2

6

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>
Rony SP
  • 2,618
  • 15
  • 16
  • Thanks for your effort! What is the size of loadingcirclests16.gif? – web-nomad May 10 '12 at 09:48
  • size of loadingcirclests16.gif small. i have also confuse about that how i can take different height and width of this image. – Rony SP May 10 '12 at 09:50
  • 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. – web-nomad May 10 '12 at 09:58
1

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.

mortalis
  • 2,060
  • 24
  • 34
  • What exactly? Does the loader animation and background show? Or the Lazy Load doesn't replace the placeholder with the URL? – mortalis Mar 23 '15 at 14:00