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

我的页面上有几张图片.我发现页面在图像加载之前开始渲染(这是很好的),但视觉效果不是很好.用户最初看到：

--------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');
}

原文地址：https://www.jb51.cc/css/216420.html