使用lazysizes进行Picturefill和lazyloading [英] Picturefill and lazyloading with lazysizes
问题描述
我正在尝试使用lazysizes和picturefill进行延迟加载。
如果我只使用基本图像，则懒惰加载本身有效：
< img class = lazyload data-srcset =http://placehold.it/301x301>
如果我检查chrome中的网络选项卡，我可以看到图像是在红线后加载的，一切都很好：
我也试过在图片元素图片中只使用一个src，但这没什么区别。
根据lazysizes文档，应该可以将这个工作放在一起，所以我想我只是错过了一个小细节？
更新：Lazysizes和Picturefill都加载在< head> 。
您需要使用 data-srcset 而不是 srcset ：
< picture>
<！ - [if IE 9]>< video style =display：none;><！[endif] - >
< source data-srcset =http://placehold.it/1370x301 1x,http://placehold.it/2055x450 2xmedia =（min-width：1024px）/>
< source data-srcset =http://placehold.it/1023x300 1x，http：//placehold.it/1534x450 2xmedia =（min-width：768px）/>
< source data-srcset =http://placehold.it/767x300 1x,http：//placehold.it/1151x450 2xmedia =（min-width：384px）/>
<！ - [if IE 9]>< / video><！[endif] - >
< img
class =lazyload
style =width：100％; max-width：100％;
alt =样本图片
data-srcset =http://placehold.it/383x300 1x,http://placehold.it/575x450 2x
/>
< / picture>
I'm trying to get lazyloading with lazysizes and picturefill to work.
The lazyloading itself works if I just use a basic image:
<img class=lazyload data-srcset="http://placehold.it/301x301">
If I check the network tab in chrome, I can see that the image was loaded after the red line, so everything is fine:
Now I added a <picture> element with my responsive images and try to load that also lazy:
<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>
Unfortunately, this image is not lazyloaded but loaded directly:
I also tried using only one src in the picture element image, but that doesn't make a difference.
According to the lazysizes doc, it should be possible to make this work together, so I guess I'm just missing a small detail?
Update: Lazysizes and Picturefill are both loaded in the <head>.
You need to use data-srcset instead of 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>
这篇关于使用lazysizes进行Picturefill和lazyloading的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
