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