2

我想知道你如何将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 属性上的位置。关于如何与 Picturefill 一起实现lazyload.js 的任何想法，或任何其他在保持使用 Picturefill 的同时延迟加载图像的方法？

4

2 回答 2

3

看看这个问题。评论者 Golodhros 有这样的想法：

根据我的经验，这很容易通过不将 data-picture 属性添加到所有图像包装器来解决。

您可以监听滚动/滑动/选项卡事件并添加 data-picture 属性，然后执行 picturefill() 以获得延迟加载功能。

joel_birch在这条推文中也回应了这一点：

延迟加载图片填充：如果图像在视口中，则仅应用数据图片属性，然后调用图片填充（）。在滚动上重复。真的很简单。

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

更新

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

于 2013-12-14T10:26:28.513 回答
0

我制作了一个定制版本的图片填充，js来实现这一点：

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

演示在

codepen.io/sheadawson/pen/fvFLc

于 2014-07-18T02:33:17.147 回答