空白图像编码为数据 – uri
我已经构build了一个图像滑块（基于极好的bxSlider ），它将在图像滑入视图之前及时预加载图像。 它工作得很好，但我不认为我的解决scheme是有效的HTML。
我的技术如下：我生成滑块标记，第一张幻灯片<img src="foo.jpg">照常插入（带有<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:"来有效地插入空白图像作为占位符。
事情是，我似乎无法finddata-URI文档中的任何内容， 说明这是否是有效的数据URI。 我基本上想要最小的数据URIparsing为空白/透明的图像，所以浏览器可以立即解决src和继续前进（没有错误或networking请求）。 也许src="data:image/gif;base64,"会更好吗？
我仔细研究过， 最小的透明GIF图像 ，编码为数据URI，是这样的：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
这是我现在使用的。
如果你需要一个透明的图像1×1像素，只需将此数据uri设置为src默认属性
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
这是一个base64编码的图像1×1白色
data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==
否则你可以设置data:null ，每个图像保存约60个额外的字节
我见过的最小的
数据：图像/ GIF; BASE64，R0lGODlhAQABAAAAACw =
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
D：小
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
有效且高度可压缩。 基本上是免费的，如果在页面中有另一个内联svg。
1px乘1px JPEG图像
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
Fabrizio的“白色gif”实际上并不完全是白色的：它是rgb(254, 255, 255) 。
我使用了下面这个（碰巧更小），在这个页面上find。
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
