编码为 data-uri 的空白图像

Question

我已经构建了一个图像滑块（基于出色的 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="" 属性（这对 某些浏览器 的性能有害），我插入了 src="data:" 以有效地插入空白图像作为占位符。

问题是，我似乎无法在 数据 URI 的文档中 找到任何说明这是否是有效数据 URI 的内容。我基本上想要解析为空白/透明图像的最小数据 URI，以便浏览器可以立即解析 src 并继续（没有错误或网络请求）。也许 src="data:image/gif;base64," 会更好？

原文由 Jens Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我调查了一下，发现 最小的透明 GIF 图像，编码为 data-uri，是这样的：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

这就是我现在正在使用的。

原文由 Jens Roland 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您需要透明图像 1x1 像素，只需将此数据 uri 设置为 src 默认属性（保留 /// 部分，它编码字节 255，而不是注释）。

 data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

这是 1x1 白色图像的 base64 编码。

 data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

否则，您可以设置 data:null 并为每个图像保存 ~60 个额外字节。

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 4.0 许可协议