0

レスポンシブ画像を配信するようにpicturefill.jsをセットアップしようとしています。src 属性の代わりに srcset 属性を使用して二重ダウンロードを回避すると、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 つのデバイスのうち、picture 要素を完全にサポートしていないデバイスは 1 つだけです (src 属性を使用すると、二重ダウンロードが発生します)。つまり、高速の iPhone 6 です。私の低速の iPhone 4 と iPad 1 には代替テキストが表示されますが、表示されていないように見えるのは単にデバイスの速度なのかどうか疑問に思っています。

人々がpicturefill.jsの使用に関して話しているのを見た唯一の本当の欠点は、二重ダウンロードを避けるためにsrc属性を省略し、javascriptを持たないものをデフォルトの画像代替テキストのままにしておくことです.tempについては何もありません。スクリプティングが終了している間の代替テキストのレンダリング。これは、二重ダウンロードとほぼ同じかそれよりも悪いように見えます。

4

0 に答える 0