【发布时间】：2016-11-02 08:53:15
【问题描述】：
我正在尝试使用延迟大小和图片填充进行延迟加载。
如果我只使用基本图像，延迟加载本身就可以工作：
<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> 中。
【问题讨论】：
标签： image lazy-loading responsive-images picturefill