Original problem for comprehension (see updates)
I have an Angular.js website that I create to be responsive. I wanted to use separate resolution images for different browser widths. So, I came across Picturefill.js , which seems to work fine.
The only problem is that Picturefill.js only works after loading the DOM. I use an Angular template and a partial HTML page for the specific page on which it is included, so my images do not load unless I resize the browser window.
This is a noted problem (No. 35) on the gifub page in the picture, but they seemed to think that this was not a big problem, and closed it. There is a suggestion on how to do a delayed loading of work on filling pictures, but I am afraid that it is above my head.
Here is the link to the source code for Picturefill.js . I can include my code if necessary, but it seems to be more of a problem with the library and how it should have been used than anything else.
UPDATE:. For others trying to figure this out, I found the AngularJS directive written to enable responsive images. This is very new, and I could not get it to work, but it looks like it promises.
2nd UPDATE: This directive had an error, but has since been fixed. Now it works correctly on my AngularJS site. If you use dynamic routes in your project, this directive does not quite work. So, in my case, I had a dynamic route app/:objectID , which pulled one JSON object per page (each page had a URL, for example app / 1, app / 2, for object 1 and object 2). Since this route has never changed, I think this directive did not materialize.
My hack that I don't understand? Change waiting = true to waiting = false on line 97. I could not find any flaws / side effects, and he got a directive that works for my use.