2

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?

John Hancock
  • 131
  • 2
  • 14
  • related - [Picturefill and lazyloading with lazysizes](http://stackoverflow.com/q/38120076/104380) – vsync Dec 22 '16 at 14:12

2 Answers2

3

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

Community
  • 1
  • 1
Jonah
  • 15,806
  • 22
  • 87
  • 161
  • Thanks Jonah. I had found this solution also, but there's some pretty nasty consequences of doing it this way that negate the benefits of using the two features. 1. Using window.scroll adds some unwanted overhead. 2. By calling window.picturefill() each time the data-picture attribute is added back in to the DOM, an HTTP request is made for each element that has data-picture, so you're calling HTTP requests for each previous picture you've loaded that way. If you have 15 images that you load using this method, by the time you load the last, you've called the first image 15 times. – John Hancock Dec 14 '13 at 15:12
  • However, having looked at the codepen you provided, the second issue doesn't seem to be happening here, which is huge. Again, thanks, this seems to solve at least the second issue I was having with my solution! – John Hancock Dec 14 '13 at 15:20
  • No problem. I don't know this for sure, but I'd imagine that jquery is pretty smart about handling scroll events, so I don't think 1. is a huge issue. And since all we're doing is checking for attribute existence in the handler (we only make an http request if we don't find it) that should be minimal too. I do think there is room improvement though. See [my comment here](https://github.com/scottjehl/picturefill/issues/99#issuecomment-30575207) for one idea I have but am not yet sure how best to implement. – Jonah Dec 14 '13 at 15:49
  • Jonah, quick question. So, when window.picturefill is called at the end of the activateVisiblePictureFills function, why does it run on only the newest span to be displayed, and not all spans that return true on checkImage() and have the data-picture attribute? As I said before, when I was trying to solve this problem, running window.picturefill() was causing all the spans with data-picture to reload their images. – John Hancock Jan 21 '14 at 16:47
  • @JohnHancock, I'm not familiar with the internals enough to answer why, but I just verified using chrome dev tools on my proof of concept that it does not reload the existing images -- only the new ones. – Jonah Jan 21 '14 at 18:12
0

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

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

Demo at

codepen.io/sheadawson/pen/fvFLc

LiveSource
  • 6,230
  • 4
  • 21
  • 20