Jquery 用于图像列表的多个加载微调器

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

我想有一排图像，每个都有自己的加载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);});                
});

.img容器{
浮动：左；
宽度：500px；
高度：500px；}
.img加载{
位置：绝对位置；
背景：url（'loading.gif'）中心不重复；
宽度：500px；
高度：500px；}
$（文档）.ready（函数（）{
$（'img'）.css（{'display'：'none'}）；
$（'img'）.bind（'load'，function（）{$（this.fadeIn（1500）；$（'img load'）.fadeOut（2000）；}）；
});

试试这个：

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

在代码中，您使用类

.img load

调用所有元素，以便在需要指定与正在加载的图像相关的元素时淡出。请尝试以下操作：

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

---

在代码中，您使用类

.img load

调用所有元素以淡出，而需要指定与正在加载的图像相关的元素。

您只需稍微更改淡出：

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

---

这会使图像淡入淡出，并获取之前的元素，然后淡出。

您只需稍微更改淡出：

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

这会使图像淡入淡出，并获取其前面的元素并淡出。

尝试

each（）

函数

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

这相当粗糙，可能需要改进，但基本概念已经存在。

尝试

每个（）函数。

函数

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

这相当粗糙，可能需要改进，但基本概念是存在的