lazysizeのPicturefillとlazyloading

lazysizeとpicturefillを使用してlazyloadingを取得しようとしています。私は基本的な画像を使用する場合lazysizeのPicturefillとlazyloading

遅延読み込み自体は動作します：私はクロームでネットワークタブを確認した場合

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

が、私はイメージが赤い線の後にロードされたことがわかりますので、すべてが正常です。今

私は私の応答性のイメージで<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>

は残念ながら、このイメージをlazyloadedのではなく、直接ロード：

私も画素画像に一つだけSRCを使用してみましたが、それは違いはありません。

lazysizesの文書によれば、この作業を一緒にすることは可能なはずなので、ちょっとした細部が欠落していると思いますか？

アップデート：LazysizesとPicturefillは両方とも<head>にロードされています。あなたが代わりにsrcsetのdata-srcsetを使用する必要が

出典

2016-06-30 NthDegree

：

<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-30 14:42:22

それだ、ありがとう！ – NthDegree

lazysizeのPicturefillとlazyloading

答えて

関連する問題