延迟加载期间如何在图像占位符顶部显示“正在加载” gif图像

Question

我正在使用这个jQuery插件来懒加载我的图像。懒加载器

一切正常。我只想在所有尚未加载的图像之上显示一个“正在加载”的图像（也许是gif），该图像在加载时消失。

任何想法如何做到这一点。

仅供参考：我使用的是1x1 gif图像作为占位符。

Answer 1

我demo project满足了您的要求，这对我来说很好用，请使用以下代码。

在头上：

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

身体 ：

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