3

我正在尝试使用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 doc，应该可以一起工作，所以我想我只是错过了一个小细节？

更新： Lazysizes 和 Picturefill 都加载在<head>.

4

1 回答 1

7

您需要使用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>
于 2016-06-30T14:42:22.217 回答