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

isOn
  .subscribe(onNext: { 
     print($0)
  })
  .disposed(by: disposeBag)

基本上你设置背景颜色并在图片加载时将其删除。