Question

Trying to remove loading animations when individual images have finished loading but have run into a problem. Loading animation is removed after first image is loaded rather than individually when specific image is loaded.

I want to have a row of images each with its own loading giff, any ideas?

This is what I have come up with so far….

.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

You just have to change the fadeOut a bit:

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

This fades de image in and get the element that is before it and fade it out.