我正在使用这个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。并为动画加载器尝试了以下解决方案。
.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
风格将不会对图像产生影响。