Picturefill und LazyLoading mit Lazysize

Ich versuche, Lazyloading mit Lazysizes und Bildfill zu arbeiten.Picturefill und LazyLoading mit Lazysize

Die Lazy Loading selbst funktioniert, wenn ich nur ein einfaches Bild verwenden:

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

Wenn ich die Netzwerk-Registerkarte in Chrom überprüfe, kann ich sehen, dass das Bild nach der roten Linie geladen wurde, so ist alles in Ordnung:

Jetzt habe ich ein <picture> Element mit meinem ansprechenden Bildern und versuchen, dass auch faul zu laden:

<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>

Leider ist dieses Bild nicht lazyloaded aber geladen direkt:

Ich versuchte auch nur ein src in dem Bildelement Bild verwenden, aber das macht keinen Unterschied.

Laut der Lazysizes doc, sollte es möglich sein, dies zusammen zu arbeiten, so dass ich denke, ich vermisse nur ein kleines Detail?

Update: Lazysize und Picturefill werden beide in <head> geladen.

Quelle

2016-06-30 NthDegree

Sie müssen data-srcset statt srcset verwenden:

<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>

Quelle

2016-06-30 14:42:22

, dass es, danke! – NthDegree

Antwort

Verwandte Themen