如何在延迟加载期间在图像占位符顶部显示加载&gif图像(&Q;) [英] How to show a "loading" gif image on top of a image placeholder during lazyload
本文介绍了如何在延迟加载期间在图像占位符顶部显示加载&gif图像(&Q;)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用这个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>
这篇关于如何在延迟加载期间在图像占位符顶部显示加载&gif图像(&Q;)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文