默认加载PNG，如果能够升级到SVG

我想在默认情况下加载一个PNG图标，以支持无法可靠处理JS的旧设备。但是，如果您在现代浏览器或设备上查看，则应该看到该图标的svg版本。我在头上运行以下代码。默认加载PNG，如果能够升级到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，这是非常低效的。

我不知道如何选择一个或另一个。

来源

2014-06-11 AfricanMatt

您需要来检测SVG图像支持**设定'src'。根据当前浏览器是否支持它，您可以适当地设置“src”。 – Ian

是的，但是如果没有JS，人们会如何检测。默认情况下必须设置src，所以不支持JS的旧设备仍然会显示相应的png图像。 – AfricanMatt

谁说你需要检测它没有JS？在JS中，或者使用特定的'src'动态添加图像，或者找到元素（如'id'或'class'）并设置它的'src'（也许显示它，默认情况下是隐藏的） – Ian

看起来这是最好的解决方案，虽然它不是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/

来源

2014-06-12 08:08:20 AfricanMatt

默认加载PNG，如果能够升级到SVG

回答

相关问题