2

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

它工作正常。我只想在所有尚未加载的图像之上显示一个“加载”图像（可能是 gif），当图像加载时它会消失。

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

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

4

2 回答 2

6

我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>
于 2012-05-10T09:42:43.360 回答
1

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

  1. 作为图像占位符，我使用了一个带有透明背景的小型 64x64 gif。
    图片

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

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

    图片

  3. 运行脚本

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

    或更新版本的插件：

    lazyload();

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

代码笔。

于 2015-03-23T13:52:22.540 回答