Jen*_*and 67 html5 web-standards 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=""属性(在某些浏览器中对性能有害),我插入了有效插入空白图像作为占位符.src="data:"
问题是,我似乎无法在文档中找到data-URI来说明这是否是一个有效的数据URI.我基本上想要解析为空白/透明图像的最小数据URI,因此浏览器可以立即解析src并继续(没有错误或网络请求).也许src="data:image/gif;base64,"会更好？
Jen*_*and 151
我调查了它,编码为数据uri 的最小可能的透明GIF图像是这样的:
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
这就是我现在正在使用的.
fca*_*ran 27
如果您需要透明图像1x1像素,只需将此数据uri设置为src默认属性
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
相反,这是图像1x1白色的base64编码
data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==
否则你可以data:null为每个图像设置并保存约60个额外字节
aze*_*ati 23
数据:图像/ GIF; BASE64,R0lGODlhAQABAAAAACw =
Adr*_*ria 19
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>
有效且高度可压缩.如果页面中有另一个内联svg,则基本上是免费的.
Ale*_*lex 10
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
更小:D
1px xpp 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).
我使用以下一个（碰巧较小），在此页面上找到。
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=