jquery - 图像列表的多个加载微调器

Question

尝试在单个图像完成加载但遇到问题时删除加载动画。加载第一个图像后移除加载动画，而不是在加载特定图像时单独移除。

我想要一排图像，每个图像都有自己的加载 giff，有什么想法吗？

这是我到目前为止想出的......

.img-container{
float:left;
width:500px;
height:500px;}
.img-loading{
position:absolute;
background:url('loading.gif') center center no-repeat;
width:500px;
height:500px;}

<div class="img-container"><div class="img-loading"></div><img src="example.jpg"    height="500" width="500" border="0"/></div>
<div class="img-container"><div class="img-loading"></div><img src="example2.jpg" height="500" width="500" border="0"/></div>
<div class="img-container"><div class="img-loading"></div><img src="example.jpg3" height="500" width="500" border="0"/></div>

$(document).ready(function(){
$('img').css({'display':'none'});
$('img').bind('load', function () { $(this).fadeIn(1500);$('.img-loading').fadeOut(2000);});                
});

Answer 1

你只需要稍微改变一下淡出:

$('img').bind('load', function () { $(this).fadeIn(1500).prev().fadeOut(2000);});

这会淡入图像并获取它之前的元素并将其淡出。