Issue with Image Resizing Solution
I am currently developing a responsive Angular.js website and was looking to use different resolution images based on browser width. After some research, I came across a solution called Picturefill.js, which seemed perfect for my needs.
However, I encountered an issue where picturefill.js only works after the DOM has fully loaded. Since I am using Angular templates and partial HTML pages, the images do not load until the browser window is resized.
This issue has been acknowledged as No. 35 on picturefill's GitHub page, but it was dismissed by the developers as not significant. There is a suggestion on how to implement deferred loading in the library, but I found it too complex for me to execute.
If you are interested, here is the link to the source code of picturefill.js. While I can provide my code if necessary, it appears that the problem lies more with the functioning of the library itself rather than my implementation.
UPDATE: In my search for a solution, I discovered an AngularJS directive designed for handling responsive images. Despite its promising features, I have yet to make it work effectively.
2nd UPDATE: Due to a bug in the directive, it initially did not function properly. However, the bug has been resolved, and now it operates correctly on my AngularJS website. It should be noted that the directive may not work as intended with dynamic routes. For instance, in my project with dynamic routes like app/:objectID, the directive failed to trigger properly since the route remained constant. To overcome this, I made a minor modification by changing waiting = true to waiting = false on line 97, which successfully solved the issue without any apparent drawbacks.