Hi guys,
I'm creating a gallery of images pulled in via a twitter image hosting service, and I want
to show a loading graphic before they are displayed, but the logic seems
to be failing me. I'm trying
to do it the following way:
<ul>
<li>
<div class="holder loading">
</div>
</li>
<li>
<div class="holder loading">
</div>
</li>
<li>...</li>
<li>...</li>
</ul>
Where there "loading" class has an animated spinner set as it's background image.
JQuery:
$('.holder').each(function(){
var imgsrc = http://example.com/imgsrc;
var img = new Image();
$(img).load(function () {
$(this).hide();
$(this).parent('.holder').removeClass('loading');
$(this).parent().append(this);
$(this).fadeIn();
})
.error(function () {
}).attr('src', imgsrc);
});
Which isn't working - I'm not sure that the logic is correct and how
to access the "holder" from inside the img.
load nested function. What would be the best way
to build this gallery so that the images display only after they've been loaded?
