Question

我们正在研究使用Iconfu SVGInject将SVG文件注入我们的HTML文件。由于某些原因，我们的一个项目仍然需要IE8的支持（不要问），所以我被迫使用真正的旧浏览器进行测试。

SVGInject文档中有fallback example表示不支持SVG，如下所示（图像尺寸由我自己添加）：

<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年编写的。

Answer 1

实际上有一种方法可以执行此操作，但它并不完美，因为它会对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（所有版本）不支持。{p>

如果禁用了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 / SVG的SVG注入的后备

1 个答案: