Image Picturefill和lazyloading与LazySize

我正试着让懒散的人用懒散的尺寸和图片填充工作

如果我只使用基本图像，懒散加载本身就可以工作：

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

如果我查看chrome中的“网络”选项卡，我可以看到图像是在红线后加载的，因此一切正常：

现在，我添加了一个带有响应图像的

元素，并尝试加载该元素：

<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都加载在

中。您需要使用

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

---

考虑使用srcset而不是

数据，这样就不必再次声明所有这些图像大小。如示例页面所示：