Is there a way to combine the lazyload js library with Picturefill?

Question

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.

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>            

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?

Answer 1

Check out this issue. Commenter Golodhros has this idea:

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

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

which is also echoed in this tweet by joel_birch:

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

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.

UPDATE

Here's a proof of concept: http://codepen.io/jonahx/pen/536957770caa3b5e3deb8d96bd421314

Answer 2

I made a customised version of picturefill,js to achieve this:

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

Demo at

codepen.io/sheadawson/pen/fvFLc