lazysizes进行Picturefill和lazyloadi

lazysizes进行Picturefill和lazyloadi

本文介绍了使用lazysizes进行Picturefill和lazyloading的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-30 20:44