在picturefill.js呈现正确图像之前临时显示alt文本

时间:2016-01-09 01:12:02

标签: javascript responsive-design mobile-safari responsive-images

我试图设置picturefill.js来传送响应式图像。当我使用srcset属性而不是src属性来避免双重下载时,默认图像alt文本会在picturefill.js有机会呈现正确的图像之前一直显示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>document.createElement( "picuture" );</script>
        <script async src="js/picturefill.min.js"></script>
    </head>
    <body>   
        <picture>
            <source srcset="desktop.jpg" media="(min-width: 768px)">                        
            <img srcset="mobile.jpg" alt="...">
        </picture>
    </body>
</html>

我只是想知道这是否是一个已知问题以及是否有解决方法。我测试过的3个设备中只有1个不完全支持图片元素(如果我使用src属性,他们会获得双重下载)并不会显示带有srcset属性的替代文字;就是我快速的iPhone 6;我的慢速iPhone 4和iPad 1显示替代文字,我只是想知道它是否只是设备的速度,使它看起来不显示。

我见过人们谈论有关使用picturefill.js的唯一真正缺点就是省略src属性以避免双重下载,留下那些没有javascript的默认图片alt text - nothing关于温度。在脚本编写完成时呈现alt文本,这几乎与双重下载一样糟糕或更糟。

0 个答案:

没有答案