Question

我正在使用这个jquery插件来延迟加载我的图像。 Lazy Loader

工作正常。我只是想在所有那些尚未加载的图像上显示一个“加载”图像（可能是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>

Answer 2

我使用 Wordpress 主题中的延迟加载。并为动画加载器尝试了以下解决方案。

作为图像占位符，我使用了一个小透明背景的64x64 gif Image

我为图片设置CSS样式，使其具有彩色背景和加载器GIF作为背景图像。

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

Image

运行脚本

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

或更新版本的插件：

lazyload();

它应该用scr属性替换彩色背景和加载器图像。 background样式不会对图像产生影响。

CodePen。

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

2 个答案: