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

Posted 2021-05-03

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

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

知道如何做到这一点。

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

答案

我为你的要求制作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>

另一答案

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

1. 作为图像占位符，我使用了一个带有透明背景的小型64x64 gif。 Image
2. 我为图像设置了CSS样式，使其具有彩色背景和加载器GIF作为背景图像。 .lazyload{ background-color:#555; background-image:url(loader.gif); background-repeat:no-repeat; background-position:center; } Image
3. 运行脚本 $("img.lazyload").lazyload({ effect : "fadeIn" }); 或者对于较新版本的插件： lazyload();

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

CodePen。