Image loader не отображается

Question

Я хочу отобразить фоновое изображение (loading.gif), пока изображение загружается. В изображении загружается Thanx на следующий код:

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

Так что есть класс «загрузка» добавлен к изображению в начале, а затем этот класс будет удален после того, как изображение полностью загружено (и отображается). Таким образом, код CSS является:

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

Проблема заключается в следующем: изображение загружается, а затем она отображается, НО загрузчик никогда не отображается во время загрузки изображения (это можно увидеть here). Я думал, что должен удалить «.hide()» ... но тогда я думаю, что изображение будет частично отображаться ДО ТОГО, что оно полностью загружено, не так ли?

Thanx для вашей помощи!

Answer 1

Это потому, что вы скрываете его, когда он загружен

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

Answer 2

window.onload = function() 
{ document.getElementById("loading").style.display = "none"; }