有没有一种方法可以将lazyload js库与Picturefill结合起来？

Question

我想知道，当lazyload的图像语法需要img标记以及数据原版时，如何将lazyload.js与Picturefill结合在一起，而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所需的类属性放在图像标签上，或者数据原始属性上。对于如何在使用Picturefill的同时实现lazyload.js或其他延迟加载映像的方法，有什么想法吗？

Answer 1

看看本期。评论员Golodhros有这样的想法：

根据我的经验，通过不将数据图片属性添加到所有图像包装器中，这是很容易解决的。 您可以侦听滚动/滑动/选项卡事件，并添加数据图片属性，然后执行picturefill()以获得延迟加载功能。

它也在桦树中得到了响应。

延迟加载Picturefill:仅在viewport中的图像应用数据图片属性，然后调用picturefill()。在卷轴上重复。真的很简单。

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

更新

这里有一个概念的证明：http://codepen.io/jonahx/pen/536957770caa3b5e3deb8d96bd421314

Answer 2

为了实现这一点，我制作了一个定制版本的picturefill，js：

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

演示

Codemen.io/sheadawson/pen/fvFLc