Question

I want to display a background image (loading.gif) while the image is loading. The image loads thanx to the following code :

var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>');
var img = item.find('img');
img
    .hide()
    .one('load', function() { $(this).removeClass('loading').attr('alt', data.title).attr('width', data.width).attr('height', data.height).fadeIn(); })
    .attr('src', data.src)
    .each(function() { if (this.complete) $(this).trigger('load'); });

So there’s a “loading” class added to the image at the beginning, and then this class is removed once the image is entirely loaded (and displayed). So the CSS code is :

.loading { background: #FFF url(../img/loading.gif) center center no-repeat; }

The trouble is : the image is loaded, and then it’s displayed, BUT the loader is never displayed while the image is loading (this can be seen here).
I thought I should delete the “.hide()”… but then I think the image will be partly displayed BEFORE it’s entirely loaded, won’t it ???

Thanx for your help !

Answer 1

It’s because you hide it when it’s loaded

var item = $('<li><a class="black-links" href="' + data.url + '#comments" title="' + data.title + '"><img class="loading"></a></li>');
var img = item.find('img');
$('<img/>').attr('src', data.src).load(function() {
      img.removeClass('loading').attr('src', data.src).hide().fadeIn();
});