不顯示圖像加載器

我想在圖像加載時顯示背景圖像（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; }

麻煩的是：加載圖像，然後它的顯示，但是當圖像加載從不顯示加載器（由此可以看出here）。我以爲我應該刪除「.hide（）」...但後來我認爲圖像將部分顯示在它完全加載之前，不是嗎？

謝謝你的幫助！

來源

2012-04-28 user1296220

裝入IMG第一（用新的圖像），然後追加它。這樣，您可以在加載時顯示微調器。 – mddw 2012-04-28 11:49:16

對不起，但我不明白我應該改變什麼...... – user1296220 2012-04-28 11:53:16

那麼，如果你創建一個圖像，加載它然後附加它，你不必隱藏，所以你可以顯示微調。其他解決方案：使用一些CSS將微調器添加到另一個元素中。 – mddw 2012-04-28 11:56:24

這是因爲你隱藏它時，它的加載

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

來源

2012-04-28 12:06:45 jcubic

但是，這整個事情看起來像它屬於循環數據'（var我在結果）{var data = result [i]; ...' – jcubic 2012-04-28 12:10:00

是不是和我的代碼一樣...沒有.hide（）？ – user1296220 2012-04-28 12:10:51

這是不一樣的，你有隱藏（外部的DOM）圖像，你附加加載事件（當它被加載時執行）和主（可見）圖像更改時，此隱藏加載。你的代碼將src添加到隱藏的元素。如果你隱藏的東西，它會被隱藏;） – jcubic 2012-04-28 12:15:00

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

來源

2012-10-07 10:36:24

不顯示圖像加載器

回答

相關問題