我们正在研究使用Iconfu SVGInject将SVG文件注入我们的HTML文件。由于某些原因,我们的一个项目仍然需要IE8的支持(不要问),所以我被迫使用真正的旧浏览器进行测试。
SVGInject文档中有一个不支持SVG的fallback example,如下所示(图像尺寸由我自己添加):
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" width="128" height="128" onload="SVGInject(this)" onerror="SVGInject.err(this, 'image.png')" />
</body>
</html>
虽然回退适用于IE8的标准配置,但我发现如果浏览器既不支持SVG也不支持Javascript(例如禁用了Javascript的IE8),则没有回退。
这是在不同方案中显示的内容:
现代浏览器(Chrome,Firefox,Webkit)
SVG作为内置SVG注入,完全可样式化
现代浏览器,禁用Javascript
SVG显示为
<img>
,不可设置样式Internet Explorer 8
显示后备PNG
Internet Explorer 8,禁用了Javascript
显示损坏的图像
在最后一种情况下未显示任何图像的原因是,永远不会触发onerror,因此无法设置fallback source属性。
我想知道即使没有SVG或Javascript支持的情况下,是否有办法(或破解)显示后备图像。
注意:这更多是理论上的问题。尽管该项目需要IE8支持,但我认为这是一些旧要求,因为这些要求是在2010年编写的。
最佳答案
实际上,有一种方法可以执行此操作,但它并不完美,因为它会对Internet Explorer 9、10和11产生性能影响。
这是没有Javascript和SVG支持的具有完全后备功能的实现:
<html>
<head>
<script src="svg-inject.min.js"></script>
<script>
// Wrapper for SVGInject that does a little preprocessing
SVGInject2 = function(img, options) {
if (typeof SVGRect != 'undefined') { // check if SVG is supported
// replace src with srcset if srcset is provided
var srcset = img.srcset;
if (srcset) {
img.src = srcset;
}
SVGInject(img, options);
}
}
</script>
</head>
<body>
<img src="image.png" srcset="image.svg" width="128" height="128" onload="SVGInject2(this)" />
</body>
</html>
它是如何工作的?
您可能知道,HTML
srcset
元素有一个<img>
属性,该属性优先于src
属性(如果提供)。常绿浏览器(Chrome,Firefox等)支持srcset
,但Internet Explorer(所有版本)不支持。如果禁用了Javascript,则
src
属性中指定的PNG将显示在Internet Explorer上。在现代浏览器中,将使用srcset
属性以及SVG的URL。如果启用了Javascript,则在图像加载后将调用功能
SVGInject2()
。这将检查浏览器是否支持SVG。如果未检测到SVG支持,则不执行任何操作。只有在IE8及更早版本的IE8和更高版本上才会显示PNG,就像禁用Javascript一样。如果检测到SVG支持,则将src
属性的值替换为srcset
属性中的值,并调用SVGInject()
函数。这将通过XHR加载SVG(使用src
属性中的URL),并将<img>
元素替换为已加载的SVG。在大多数情况下,浏览器中的SVG已经存在(从初始负载开始),因此SVG仅通过网络传输一次。但是,这会对Internet Explorer 9、10和11产生负面的性能影响。在这些浏览器上,无论如何都将加载PNG,因为不支持
srcset
。如果注入了SVG,则不使用PNG,这意味着不需要进行PNG传输。在其他浏览器上,使用此后备方法应该不会对性能造成影响。免责声明:我是SVGInject的作者之一。
关于javascript - 不支持Javascript/SVG的SVG注入(inject)的后备,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52364501/