顯示加載圖像仍顯示「瀏覽器加載圖像」圖標

Question

我有此代碼運行加載我的圖像所有異步並顯示ajax加載圖像，直到下載實際圖像。

$('img.loadable-image').css('background', 'transparent url(/images/ajax-loader1.gif) no-repeat center center') 
$('img.loadable-image').load(function() { $(this).css('background', ''); }); 

這工作，因爲它顯示了我的AJAX加載圖標，直到圖像被下載，但它也顯示了背景，以及

這裏是我的原始圖像的html：

<img class="loadable-image" src="mysite.com/validimage.jpg" border="0" height="50" width="50"> 

這裏我得到的屏幕截圖：

alt text http://img820.imageshack.us/img820/3289/ajaxload.png

，就像你在左邊看到的那樣，你會看到小的ajax裝載程序，但是也會看到它周圍丟失的圖像。

有什麼建議嗎？

Answer 1

請參閱http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2，它定義<img>標記必須具有src屬性。

丟失的方塊將歸因於<img>標記的src屬性。如果它沒有設置爲有效的圖片網址，則會顯示「損壞的圖片」框。設置src而不是背景（或將其設置爲透明圖像）或將其更改爲<span>元素而不是<img>元素。

無效的，沒有src屬性== 「破碎的形象」 圖標：

<img alt="" style="width:50px; height:50px; background-image:url(bg.gif)" /> 

有效，與src屬性：

<img alt="" src="transparent.gif" 
    style="width:50px; height:50px; background-image:url(bg.gif)" /> 

---

你的編輯後，我可以看到你」重新正確地做，問題是圖像需要很長時間才能下載。在這種情況下，你有幾種選擇：

• 如果你有在圖像上的控制，make them load progressively（保存GIF/PNG隔行掃描，JPEG爲逐行掃描）。
• 如果您無法控制圖像，請將隱藏在圖層中的img包裹起來，將背景圖像應用於span元素，並在load事件觸發時顯示圖像。

例：

<span class="loadable-image-container"> 
    <img class="loadable-image" src="mysite.com/validimage.jpg" 
     border="0" height="50" width="50"> 
</span> 

jQuery的，是這樣的：

$('img.loadable-image-container') 
    .css('background', 
     'transparent url(/images/ajax-loader1.gif) no-repeat center center') 
    .children().css('visibility', 'hidden'); 

$('img.loadable-image').load(function() { 
    $(this) 
     .css('visibility', 'visible') 
     .parent().css('background', ''); 
});