UPDATE: Responsive images in AngularJS

Question

Original Issue for Posterity (see updates)

I've got an Angular.js website I'm building out to be responsive. I wanted to use separate resolution images for different browser widths as well. So, I stumbled upon Picturefill.js, which seems like it would work perfectly.

The only problem is that picturefill.js only works once the DOM is loaded. I'm using an Angular template and partial HTML page for the particular page this is on, so my images don't load unless I resize the browser window.

This is a noted issue (No. 35) on picturefill's github page, but they seemed to think it wasn't a big deal, and closed it out. There is a suggestion there about how to make deferred loading of the picture fill work, but I'm afraid it is over my head.

Here is the link to the source code for picturefill.js. I can include my code if needed, but it seems to be more of an issue with the library and how it was meant to be used than anything else.

UPDATE: For anyone else trying to figure this out, I've found an AngularJS directive written to incorporate responsive images. It is very new, and I haven't been able to make it work, but it seems to hold promise.

2nd UPDATE: This directive did have a bug in it, but this has since been fixed. It now works correctly on my AngularJS website. If you are using dynamic routes in your project, this directive doesn't quite work, though. So, in my case, I had a dynamic route app/:objectID that pulled one JSON object per page (each page then had a url like app/1, app/2, for object 1 and object 2). Since that route never actually changed, I think the directive failed to refire.

My hack that I don't understand? Change waiting = true to waiting = false on line 97. I couldn't find any downsides/side effects to this, and it got the directive working for my use case.

Answer 1

Have a look at Angular Picture. Inspired by @Tina's own, it uses the Polyfill 2.0 syntax, ie the new HTML5 pictureelement.

Answer 2

I also wanted to use Picturefill with AngularJS but instead of trying the other solution mentioned, I decided to develop this AngularJS directive to use Picturefill with AngularJS. Instructions on its implementation are provided, as well as a demo. It works with both static and dynamic data provided by the scope and can be installed using bower.