Question

使用以下内容：

background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpQABCBxIsCCAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7Kvy4EYEAkSNBljyJ0iDJiiZbulQJk6XMhjQTxLyJk+ZOngBe6rTJU+jPojmTKqXZc6nTpAKFPp0qsMDUqyoHWsWKleBWrk8LfgV5AKjYnGXNakWrdi3NtG3HbjTQtmrOAnUByK2It+7eBH3j5iSQVy5cv3PzegWsuCDExmYDAgA7) no-repeat center center;}

很好，但是当base64不可用时，我希望能够提供优雅的降级（css断言是通过javascript）。

显然，在v8之前的IE缺乏此功能所以我可以通过浏览器 - 但如果可能的话，我更愿意检测它的功能。

关于如何去做的任何想法？

Answer 1

这可能就是您要找的内容：http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

我开发了一个脚本，在IE6 +中添加了对DataURI方案的部分支持：http://phenxdesign.net/projects/phenx-web/iedatauri/example.php，代码在这里：http://code.google.com/p/phenx-web/source/browse/trunk/iedatauri/

IE5 +也支持某种数据URI，但并不总是可以使用它：http://www.betalon.com/blog/html_css/data-uri-in-css-crossbrowser.htm

Answer 2

使用上面来扩展mootools Browser.Features对象（如果有人发现它有用，则modernizr不支持它）

http://www.jsfiddle.net/dimitar/5JT45/13/show/或https://gist.github.com/821370

(function() {
    Browser.Features.base64 = null;
    var callback = function() {
        Browser.Features.base64 = this.width == 1 && this.height == 1;        
        // alert(Browser.Features.base64); // true || false
    };

    var img = new Image(), img = document.id(img) || new Element("img");
    img.onload = img.onerror = img.onabort = callback;
    // 1x1 px gif to test with
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

})();

Answer 3

在他们的维基https://github.com/Modernizr/Modernizr/issues/14上找到了Modernizr的这个插件：

Modernizr.addTest('datauri',function(){
  var data = new Image();
  data.onload = data.onerror = function(){
    return (this.width == 1 && this.height == 1);
  }
  data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
})

是否有一种可行的方法来为图像提供检测支持：data base64

3 个答案: