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

你只需稍微更改fadeOut：

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

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

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

那很粗糙可能需要精炼，但基本概念就在那里。

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

3 个答案: