Picturefill 和 lazyloading with lazysizes

Question

我正在尝试使用 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，但这并没有什么不同。

根据 lazysizes 文档，应该可以使它协同工作，所以我想我只是遗漏了一个小细节？

更新：Lazysizes 和 Picturefill 都加载到 <head>。

Answer 1

您需要使用 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>

Picturefill 和 lazyloading with lazysizes

Picturefill and lazyloading with lazysizes

lazy-loading

image

picturefill

responsive-images