多个加载微调器以获取图像列表

Question

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

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

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

.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

您只需要稍微修改一下fadingOut：

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

这会淡化de image并获取其之前的元素并将其淡出。

Answer 2

尝试这个：

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

在您的代码中，当需要指定相对于要加载的图像的一个元素时，正在将所有具有.img-loading类的元素调用为fadeOut。

Answer 3

尝试一个each()函数

$('img').each(function(){
        var container = $(this).parent();
        $(this).bind('load', function () { $(this).fadeIn(1500);$('.img-loading', container).fadeOut(2000);});
});

多数民众赞成在可能需要完善，但基本概念在那里。