html - 没有图像的漂亮的 css 持有人

Question

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

我的图片代码如下

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

1. 有什么好的方法可以在不放置虚拟图像的情况下作为图像持有者？可以在没有 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 的限制。