我构建了一个图像滑块（基于出色的 bxSlider），它将在图像滑入视图之前及时预加载图像。它已经运行得很好，但我不认为我的解决方案是有效的 HTML。
我的技术如下：我生成滑块标记，其中第一个幻灯片图像照常插入（使用 
![]()
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="" 属性（它们是 对 href="http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/">一些浏览器），我插入了 src= “data:” 有效插入空白图像作为占位符。
问题是，我似乎在 data-URI 文档 中找不到任何内容说明这是否是数据 URI 是否有效。我基本上想要解析为空白/透明图像的最小数据 URI，以便浏览器可以立即解析 src 并继续（没有错误或网络请求）。也许 src="data:image/gif;base64," 会更好？
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?
发布评论
评论（7）
Fabrizio 的“白色 gif”实际上并不是完全白色：它是 rgb(254, 255, 255)。
我使用以下一个（恰好较小），可以在此页面上找到。
Fabrizio's "white gif" isn't actually perfectly white : it is
rgb(254, 255, 255).I use the following one (which happens to be smaller), found on this page.
我研究了它并编码了最小可能的透明GIF图像作为数据 uri，是这样的：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==这就是我现在正在使用。
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.
如果您需要 1x1 像素的透明图像，只需将此数据 uri 设置为
src默认属性（保留///部分，它编码字节 255，而不是注释）。这是 1x1 白色图像的 Base64 编码。
否则，您可以设置
data:null并为每个图像节省大约 60 个额外字节。If you need a transparent image 1x1 pixel, just set this data uri as
srcdefault attribute (keep the///parts, it encodes byte 255, not a comment).This is instead a base64 encoding for an image 1x1 white.
Otherwise you could set
data:nulland save ~60 extra bytes for each image.有效且高度可压缩。如果页面中有另一个内联 svg，则基本上是免费的。
Valid and highly compressible. Essentially free if there's another inline svg in the page.
我见过的最小的
更新：这似乎已损坏并且不再工作，如 @bryc 所报告的，请使用其他答案。
The smallest I've ever seen
update: This seems broken and doesn't work anymore as reported by @bryc, please use the other answers.
更小：D
is smaller :D
1 像素 x 1 像素 JPEG 图像
1px by 1px JPEG image