3

lazysizesとpicturefillを使用して遅延読み込みを機能させようとしています。

基本的なイメージを使用するだけで、遅延読み込み自体が機能します。

<img class=lazyload data-srcset="http://placehold.it/301x301">

Chrome のネットワーク タブを確認すると、赤い線の後に画像が読み込まれていることがわかります。すべて問題ありません。

ここに画像の説明を入力

ここで、レスポンシブ画像を含む要素を追加し、<picture>それも遅延してロードしようとしました:

<picture>

    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" />
    <source srcset="http://placehold.it/1023x300 1x, http://placehold.it/1534x450 2x" media="(min-width: 768px)" />
    <source srcset="http://placehold.it/767x300 1x, http://placehold.it/1151x450 2x" media="(min-width: 384px)" />
    <!--[if IE 9]></video><![endif]-->

    <img
            class="lazyload"
            style="width: 100%; max-width: 100%;"
            alt="Sample pic"
            data-srcset="http://placehold.it/383x300 1x, http://placehold.it/575x450 2x"
    />

</picture>

残念ながら、この画像は遅延読み込みではなく、直接読み込まれます。 ここに画像の説明を入力

また、絵素画像で src を 1 つだけ使用してみましたが、違いはありません。

lazysizes doc によると、これを一緒に機能させることができるはずなので、細部が欠けているだけだと思いますか?

更新: Lazysizes と Picturefill は両方とも にロードされます<head>。

4

1 に答える 1

7

data-srcset代わりに使用する必要がありますsrcset：

<picture>

    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source data-srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" />
    <source data-srcset="http://placehold.it/1023x300 1x, http://placehold.it/1534x450 2x" media="(min-width: 768px)" />
    <source data-srcset="http://placehold.it/767x300 1x, http://placehold.it/1151x450 2x" media="(min-width: 384px)" />
    <!--[if IE 9]></video><![endif]-->

    <img
            class="lazyload"
            style="width: 100%; max-width: 100%;"
            alt="Sample pic"
            data-srcset="http://placehold.it/383x300 1x, http://placehold.it/575x450 2x"
    />

</picture>
于 2016-06-30T14:42:22.217 に答える