1

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

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

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

.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);});                
});
4

3 回答 3

1

你只需要稍微改变一下fadeOut：

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

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

于 2012-09-14T16:04:26.197 回答
0

尝试这个：

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

在您的代码中，.img-loading当您需要指定与正在加载的图像相关的元素时，您将使用该类调用所有元素以淡出。

于 2012-09-14T16:03:02.533 回答
0

尝试一个each()功能

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

那很粗糙可能需要改进，但基本概念是存在的。

于 2012-09-14T16:05:05.197 回答