4

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.

xEmptyCanx
  • 528
  • 3
  • 10
  • 22
  • I am having this exact same problem. I will check out that AngularJS directive but any progress or news? –  Jun 24 '13 at 10:43
  • Yes! There is some good news on this front. See the update. The directive should work out of the box, unless you have a dynamic $route in your project. – xEmptyCanx Jun 24 '13 at 23:23
  • Nice! I downloaded the ZIP but how should I integrate it into my current AngularJS app? I mean I see all the extra files like `bower.json`, `package.json`, `Gruntfile.js`, test folder, etc. Not sure if I have to do anything with those. –  Jun 25 '13 at 11:06
  • No, you're interested in the source file. It will have a .js file in it named responsive images or something like that. Put that in your project file, the reference the file in your HTML (like you do with the entire angualrjs library). Then, reference the directive itself in your app module like so: `angular.module('my_app', ['my_app_directives', 'ngResponsiveImages']).` After that, follow the ReadMe instructions to setup the images to be responsive. Hope that works. – xEmptyCanx Jun 25 '13 at 21:55
  • Ahh right you are. Thank you. It works lovely. :) –  Jun 26 '13 at 09:06

2 Answers2

4

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

Community
  • 1
  • 1
rebelliard
  • 9,592
  • 6
  • 47
  • 80
  • I haven't implemented this, but it looks like Angular has come far in regards to using this element. Good suggestion man. – xEmptyCanx Nov 03 '14 at 00:02
0

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.

Tina
  • 1,186
  • 10
  • 11