jquery - 画像ローダーが表示されない

Question

画像の読み込み中に背景画像（loading.gif）を表示したい。画像は次のコードに感謝をロードします：

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

問題は次のとおりです。画像が読み込まれてから表示されますが、画像の読み込み中にローダーが表示されることはありません（これはここで確認できます）。「.hide（）」を削除する必要があると思いましたが、完全に読み込まれる前に画像が部分的に表示されると思いますね。

あなたの助けに感謝します！

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