CSS設置圖像背景顏色，不顯示圖像

Question

我想製作簡單的圖像骨架。

<img src=""></img> ... 

現在，當我打開我的網頁，我看到加載圖片。所以，我怎麼能例如灰色的背景設定在該圖像上，然後：

$(window).on("load", function() { 
    // remove css which overwrited image with grey color. 
}); 

像

img { 
    background-color: grey !important; 
} 

不工作。提前致謝。

Answer 1

你可以創建一個只包含你的形象一個div併爲它分配一個灰色的背景

#container{ 
    background-color:grey; 
    border: 1px solid black; 
    } 

然後使用jQuery，你可以追加到html文檔圖像：

$(document).ready(function(){ 
    $('#container').append(
    '<img id=img_id src=" ">' 
    ); 
}); 

Answer 2

<img id="image" src=""> 

$('#image').css("background-color","grey"); 
$('#image').on("load", function() { 
    $('#image').css("background-color","transparent"); 
}); 

基本上你設置了背景顏色並在你的圖片加載時將其刪除。