Question

任何可用于在等待图像加载时放置在图像持有者上的技术。一种典型的做法是在等待加载真实图像的同时放置虚拟图像。

我的图片代码如下

<div id="realimage" style="background-image: real_image.jpg"/>

任何好的方式放置为图像持有人而不放置虚拟图像？使用没有javascript的纯CSS？

Answer 1

您可以使用data URI scheme作为虚拟图像的来源。它将加载HTML，不需要额外的请求。

所以，在你的CSS中你可以这样做（嵌入一个红点）：

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

IE 6/7不支持此功能，在IE 8中，图像大小限制为32k。

Answer 2

在css3中，您可以添加多个背景图像：

.realimage {
  background-image: url(haevy.png), url(dummy.png);
  background-position: center, center;
  background-repeat: no-repeat;
}

第一张图片是顶部图片

小提琴：http://jsfiddle.net/MbpgL/1/

警告：较旧的浏览器版本并不总是喜欢CSS3，特别是IE。但我说不升级/约会的人不配得上不错的网站！

没有图像的好css持有人

2 个答案: