Question

我想知道如何将lazyload.js与Picturefill结合使用，当lazyload的图像语法需要img标签和data-original时，Picturefill的语法没有那些点。

例如，这是我使用Picturefill的图像标记：

  <span data-picture data-alt="Operating room 2 stands vacant in Dr. Tariq Mahmood's closed Renaissance Hospital in Terrell, Texas.">
            <span data-src="img/main1_small.jpg"></span>
            <span data-src="img/main1_small_x2.jpg"     data-media="(min-width: 300px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="img/main1_small.jpg"        data-media="(min-width: 300px)"></span>
            <span data-src="img/main1_medium_x2.jpg"    data-media="(min-width: 601px) and (min-device-pixel-ratio: 2.0)"></span>
            <span data-src="img/main1_medium.jpg"       data-media="(min-width: 601px)"></span>    
            <span data-src="img/main1_large.jpg"        data-media="(min-width: 1101px)"></span>                                       

            <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <noscript>
                <img src="img/main1_small.jpg" alt="Operarting room 2 stands vacatn in Dr. Tariq Mahmood's closed Renaissance Hospital in Terrell, Texas.">
            </noscript>
         </span>

我不确定在何处将lazyload.js所需的类属性放在图像标记或data-original属性上。有关如何实现lazyload.js以及Picturefill的任何想法，或者在保持使用Picturefill的同时延迟加载图像的任何其他方法？

Answer 1

结帐this issue。评论者Golodhros有这个想法：

根据我的经验，这可以通过不添加来轻松解决   所有图像包装器的数据图片属性。

您可以收听滚动/滑动/标签事件并添加数据图片   属性，之后执行picturefill（）以获得延迟加载   特征

也在this tweet by joel_birch中回应：

延迟加载Picturefill：仅在图像输入时应用数据图片属性视口，然后调用picturefill（）。滚动重复。很简单。

基本上，您可以设置自己的滚动侦听器（或使用库或脚本），当每个图片填充范围进入视图时，您将data-picture属性添加到其容器span，然后手动调用window.picturefill()（根据文档，该方法有意在全局命名空间中公开）。这将导致picturefill脚本再次运行，此时它将检测新滚动的视图元素，并正常处理它，下载正确大小的图像。

更新

以下是概念验证：http://codepen.io/jonahx/pen/536957770caa3b5e3deb8d96bd421314

Answer 2

我制作了一个自定义版本的picturefill，js来实现这个目标：

https://gist.github.com/sheadawson/dd4891fa13f82f6a9b20

演示

codepen.io/sheadawson/pen/fvFLc

有没有办法将lazyload js库与Picturefill结合起来？

2 个答案:

更新