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?
I made a customised version of picturefill,js to achieve this:
https://gist.github.com/sheadawson/dd4891fa13f82f6a9b20
Demo at
codepen.io/sheadawson/pen/fvFLc
Check out this issue. Commenter Golodhros has this idea:
which is also echoed in this tweet by joel_birch:
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 containerspan
, and then manually callwindow.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