css - 等待完整图像加载时的占位符背景/图像？

Question

我的页面上有一些图片。我发现页面在加载图像之前就开始呈现(这很好)，但视觉效果不是很好。最初用户看到的是:

 --------hr--------
 text

然后几毫秒后页面跳转显示:

--------hr--------
[           ]
[   image   ]
[           ]
text

有没有一种简单的方法可以显示灰色背景图像，其确切宽度和高度图像将占据，直到图像本身加载？

复杂的因素是我事先不知道图像的高度和宽度:它们是响应式的，只是设置为包含 div 的 width: 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 答案。或者我事先不知道图像的高度是一个无法解决的问题？我确实知道图像的纵横比。

Answer 1

不是直接引用图像，而是将其粘贴在 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');
}