编码为data-uri的空白图像
我已经构建了一个图像滑块(基于非常棒的bxSlider)，它将在图像滑入视图之前及时预加载图像。它已经运行得很好了，但我不认为我的解决方案是有效的HTML。
我的技术如下:我生成滑块标记，第一张幻灯片图像照常插入(使用<img src="foo.jpg">)，后续图像在数据属性(如<img data-orig="bar.jpg"> )中引用。然后，Javascript在必要时更改data-orig -> src，从而触发预加载。
换句话说，我有：
<div class="slider">
<div><img src="time.jpg" /></div>
<div><img src="data:" data-orig="fastelavn.jpg" /></div>
<div><img src="data:" data-orig="pels_strik.jpg" /></div>
<div><img src="data:" data-orig="fashion.jpg" /></div>
</div>为了避免src=""属性为空(在some browsers中为harmful to performance )，我插入了src="data:"来有效地插入一个空白图像作为占位符。
问题是，我似乎在documentation for data-URI中找不到任何东西来说明这是否是有效的数据URI。我基本上想要最小的数据URI，它可以解析为空白/透明的图像，这样浏览器就可以立即解析src并继续前进(没有错误或网络请求)。也许src="data:image/gif;base64,"会更好？
回答 6
Stack Overflow用户
发布于 2012-04-02 02:47:08
我查看了一下，编码为数据uri的smallest possible transparent GIF image是这样的：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
这就是我现在使用的。
Stack Overflow用户
发布于 2012-02-03 19:30:51
如果您需要一个1x1像素的透明图像，只需将此数据uri设置为src默认属性(保留///部分，它将编码255字节，而不是注释)。
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==取而代之的是1x1白色图像的base64编码。
data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==否则，您可以设置data:null，并为每个图像节省大约60个额外的字节。
Stack Overflow用户
发布于 2015-07-12 19:12:15
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>有效且高度可压缩。如果页面中有另一个内联svg，那么它基本上是免费的。
https://stackoverflow.com/questions/9126105
复制相似问题