Question

我想默认加载一个png图标，以支持无法可靠处理JS的旧设备。但是，如果您在现代浏览器或设备上查看，则应该看到该图标的svg版本。我正在运行以下代码。

window.onload = function() {
  var i, elements = document.getElementsByTagName('img');

  for (var i = 0; i < elements.length; i++) {
    var filetype = elements[i].getAttribute('src').split("."),
        extention = filetype.pop();

    if(extention.toLowerCase() == 'png'){
      var hasSVGAttribute = elements[i].getAttribute('data-svg-enhance');

        if (hasSVGAttribute !== null) {
          elements[i].src = hasSVGAttribute;
          elements[i].removeAttribute('data-svg-enhance');
        } else {
          elements[i].src = filetype.join('.')+'.svg';
        }
     }

  };
}

这是我修改过的图片标记的样子：

<img src="img/png/home.png" data-svg-enhance="img/svg/home.svg" alt="Home">

所有这些都适用于低端设备。它会加载png并且根本不会打扰svg。问题出在像iPhone这样支持所有技术的高端设备上。该脚本可以正常工作，但默认情况下它会加载png，因此我现在加载了png和svg，效率极低。

我无法弄清楚如何选择其中一种。

Answer 1

看起来这是最好的解决方案，尽管它不是100％有效的标记。

      <svg width="36" height="36">
        <image xlink:href="img/svg/home.home.svg" src="img/png/home.home.png" width="36" height="36" alt="Shoprite Specials" />                
      </svg>

这回退到旧设备上的png并立即将svg加载到有能力的设备上。即9-11也有问题。

更多：http://css-tricks.com/svg-fallbacks/

默认情况下加载PNG，如果有能力则升级到SVG

1 个答案: