如何阻止圖像在加載時顯示「空白文檔」圖標？

我有一大堆的服務器端的生成與下面的HTML標籤圖片：如何阻止圖像在加載時顯示「空白文檔」圖標？

<img width="75" height="75" src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1">

的問題是，在圖像顯示默認的「空白文檔」（或「丟失圖像」）圖標和邊界，同時他們正在加載。它看起來像這樣：圖像加載

後，當然圖標消失，鮑德爾被設置爲我在CSS中指定的一個。

我不想創建花哨的預加載器，什麼不是，但我想使這個「空白文檔」圖標和默認邊框消失。儘管用戶看到它不到一秒鐘，但仍然不好，因爲它造成了我的圖像出現問題的印象。

如何在圖像加載時使圖標不顯示？

一個想法是設置圖像的背景，但我不能這樣做，因爲圖像有透明區域，然後將圖像加載後背景的某些部分是可見的。

WITH A替代方法

更新我注意到，如果我不指定寬度和高度，而圖像加載不顯示的默認缺少的圖標和邊框。作爲一種變通方法，我做了以下內容：

<div class="imgholder"><img src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div>

和風格的圖像保持如下：

.imgholder { 
      border: 2px solid #ddd; 
      margin: 2px; 
      padding: 2px; 
      width: 75px; /* fixed dimensions - should match image sizes to avoid cropping */ 
      height: 75px; 
      overflow: hidden; /* never show scrollbar */ 
      float: left; 
     }

不過，這將是巨大的，有一些方法來樣式加載圖像本身，擺脫那個形象持有者<div>。

來源

2013-08-07 JustAMartin

-1

您可以使用替代文本屬性。

一個問題你如何加載圖像？在頁面加載時使用異步調用加載或加載這些圖像？

來源

2013-08-07 10:19:50

無論是否加載它們，都會在兩種情況下顯示缺失圖標。在圖片加載過程中，alt屬性不會刪除「丟失」圖標。 – JustAMartin

-1

$("img").on({load:function(){}, 
        error:function(){ 
        $(this).attr("src","blank.png") 
        });

來源

2013-08-07 10:32:06

在我的情況下，錯誤處理，因爲圖像是在最後加載就好了不會被觸發。它只需要一些時間來加載它，並且在加載期間，「缺失」圖標是可見的。至少，在Mozilla Firefox瀏覽器。 – JustAMartin

每個瀏覽器都顯示破碎的圖標嗎？無論哪種方式，你有沒有試過這個jquery插件：Imagesloaded？它可能有助於你的情況。

來源

2013-08-07 12:56:13 user2513484

如何阻止圖像在加載時顯示「空白文檔」圖標？

回答

相關問題