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

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

我做了一个定制版的picturefill,js来实现这个：

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

演示在

codepen.io/sheadawson/pen/fvFLc

Answer 2

查看this issue。评论者 Golodhros 有这样的想法：

根据我的经验，通过不添加 所有图像包装器的 data-picture 属性。

您可以收听滚动/滑动/标签事件并添加数据图片 属性，之后执行 picturefill() 以获取延迟加载 功能。

这也在this tweet by joel_birch中得到回应：

Lazy-load Picturefill：如果图像在，则仅应用 data-picture 属性 视口，然后调用图片填充（）。在滚动上重复。真的很简单。

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

更新

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