我的页面上有几张图片.我发现页面在图像加载之前开始渲染(这是很好的),但视觉效果不是很好.用户最初看到：
--------hr-------- text
--------hr-------- [ ] [ image ] [ ] text
有没有一种简单的方式,我可以显示图像所占据的宽度和高度的灰色背景图像,直到图像本身加载？
复杂因素是我不知道图像的高度和宽度提前：它们是响应的,只是设置为宽度：包含div的100％.这是HTML / CSS：
<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }
这是一个JSFiddle来说明基本的问题：http://jsfiddle.net/X8rTB/3/
我已经研究了像LazyLoad这样的东西,但是我忍不住感觉一定要有一个更简单的非JS答案.或者事实上,我不知道图像的高度提前是一个不可逾越的问题？我知道图像的宽高比.
解决方法
不要直接引用图像,而是将其粘贴在DIV中,如下所示：
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
然后在你的CSS中
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
