Picturefill und Lazyloading mit Lazysizes

Question

Jun 30, 2016, 12:10 PM

lazy-loading picturefill responsive-images image

Picturefill und Lazyloading mit Lazysizes

Ich versuche, Lazyloading mit Lazysizes und Picturefill zum Laufen zu bringen.

Das Lazyloading selbst funktioniert, wenn ich nur ein einfaches Bild verwende:

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

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

Nun habe ich ein @ hinzugefü<picture>element mit meinen responsiven Bildern und versuche das 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>

Dieses Bild wurde leider nicht geladen, sondern direkt geladen:

Ich habe auch versucht, nur eine Quelle im Bildelementbild zu verwenden, aber das macht keinen Unterschied.

Entsprechend dem Lazysizes-Dokument sollte es möglich sein, diese Arbeit zusammen zu machen, also vermisse ich wohl nur ein kleines Detail?

Update: Lazysizes und Picturefill werden beide in das @ gelad<head>.