空白图像编码为数据 - uri [英] Blank image encoded as data-uri

问题描述

我已经构建了一个图像滑块（基于极好的 bxSlider ），它将在图像滑入视图前及时预加载图像。它已经运行得很好，但我认为我的解决方案不是有效的HTML。

我的技术如下：我生成滑块标记，第一张幻灯片图像是（如< img src =foo.jpg> ）插入，并在数据属性中引用后续图像，如< img data-orig =bar.jpg> 。一个Javascript然后玩弄 data-orig - >

换句话说，我有：

 < 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：有效地插入空白图片作为占位符。

事情是，我看起来似乎在 data-URI文档中查找是否为有效数据URI的任何内容。我基本上想要最小化的数据URI解析为空白/透明图像，因此浏览器可以立即解析src并继续前进（没有错误或网络请求）。也许 src =data：image / gif; base64，会更好吗？

解决方案

我调查了它和最小的透明GIF图像，编码为data-uri，是这样的：

data：image / gif; base64，R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAAAAAAAAAAAAAAAAAAAATAAICTAEAOw ==

这就是我现在使用的。

I've built an image slider (based on the terrific bxSlider) which will preload images just-in-time before they slide into view. It's working pretty well already, but I don't think my solution is valid HTML.

My technique is as follows: I generate the slider markup with the first slide image being inserted as usual (with an <img src="foo.jpg">) and subsequent images being referenced in a data attribute like <img data-orig="bar.jpg">. A Javascript then juggles the data-orig -> src change when necessary, triggering the preloading.

In other words, I have:

<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>

To avoid empty src="" attributes (which are harmful to performance in some browsers), I've inserted src="data:" to effectively insert a blank image as a placeholder.

The thing is, I can't seem to find anything in the documentation for data-URI saying whether this is a valid data-URI or not. I basically want the minimal data-URI that resolves to a blank/transparent image, so the browser can resolve the src immediately and move on (with no error or network request). Maybe src="data:image/gif;base64," would be better?

解决方案

I looked into it and the smallest possible transparent GIF image, encoded as a data-uri, was this:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

which is what I'm using now.

这篇关于空白图像编码为数据 - uri的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！