0

我正在尝试设置 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 属性的 alt 文本；即，我的快速 iPhone 6；我较慢的 iPhone 4 和 iPad 1 显示 alt 文本，我只是想知道是否只是设备的速度让它看起来好像没有显示。

我看到人们谈论的关于使用picturefill.js 的唯一真正的缺点是省略了src 属性以避免双重下载，将那些没有javascript 的图像保留为默认图像替代文本——与临时无关。在脚本完成时渲染 alt 文本，这似乎与双重下载一样糟糕或更糟。

4

0 回答 0