有没有一种方法可以将lazyload js库与Picturefill结合使用? [英] Is there a way to combine the lazyload js library with Picturefill?

问题描述

我想知道当lazyload的图像语法需要img标签以及数据原始的图片，而Picturefill的语法对此没有用时，您如何将lazyload.js与Picturefill结合在一起.

I'm wondering how you would incorporate lazyload.js with Picturefill, when lazyload's image syntax requires the img tag along with data-original, and Picturefill's syntax doesn't have a spot for those.

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

For example, this is my markup for an image using 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所需的class属性放在image标记或data-original属性上的位置.关于如何与Picturefill一起实现lazyload.js的任何想法，或在保持使用Picturefill的同时以其他方式延迟加载图像的任何想法?

Not sure where I would place the class the class attribute that lazyload.js requires on the image tag, or the data-original attribute. Any ideas on how to implement lazyload.js along with Picturefill, or any other ways to lazy load images while maintaining the use of Picturefill?

推荐答案

查看此问题.评论者Golodhros有这个想法:

Check out this issue. Commenter Golodhros has this idea:

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

From my experience this is easily fixable by not adding the data-picture attribute to all of the image wrappers.

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

You can listen to your scroll/swipe/tab event and add the data-picture attribute, executing picturefill() afterwards to get the lazy-loading feature.

在 joel_birch的推文中也得到了回应:

延迟加载Picturefill:仅当图像位于 视口，然后调用picturefill().重复滚动.真的很简单.

Lazy-load Picturefill: only apply data-picture attribute if image in viewport, then call picturefill(). Repeat on scroll. Simple really.

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

So basically, you setup your own scroll listeners (or use a library or script for that), and when each picturefill span comes into view, you add the data-picture attribute to its container span, and then manually call window.picturefill() (per the docs, that method is intentionally exposed in the global namespace). This will cause the picturefill script to run again, at which point it will now detect your newly scrolled-into-view element, and do its normal thing to it, downloading the correctly sized image.

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

这篇关于有没有一种方法可以将lazyload js库与Picturefill结合使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！