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?