我想知道如何将lazyload.js 与Picturefill 合并，当lazyload 的图像语法需要img 标签和原始数据时，而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 的任何想法，或者在保持 Picturefill 的使用的同时延迟加载图像的任何其他方法？
查看这个问题 https://github.com/scottjehl/picturefill/issues/99。评论者 Golodhros 有这样的想法：
根据我的经验，通过不添加
所有图像包装器的数据图片属性。
您可以监听滚动/滑动/选项卡事件并添加数据图片
属性，之后执行 picturefill() 以获得延迟加载
特征。
这也反映在joel_birch 的这条推文 https://twitter.com/joel_birch/status/341197804976369664:
延迟加载图片填充：仅在图像位于时才应用数据图片属性
视口，然后调用 picturefill()。在滚动上重复。真的很简单。
所以基本上，您设置自己的滚动侦听器（或使用库或脚本），并且当每个图片填充范围进入视图时，您添加data-picture属性到它的容器span，然后手动调用window.picturefill()（根据文档，该方法是有意公开在全局命名空间中的）。这将导致图片填充脚本再次运行，此时它将检测新滚动到视图的元素，并对其执行正常操作，下载正确大小的图像。
UPDATE
这是概念证明：http://codepen.io/jonahx/pen/536957770caa3b5e3deb8d96bd421314 http://codepen.io/jonahx/pen/536957770caa3b5e3deb8d96bd421314
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
