I am developing an Angular JS application using ionic. For android, I am using crosswalk for better performance.
I’ve noticed that when running on Android, I am facing problems with http requests getting stuck when trying to load large images - if any request gets “stuck” – i.e. no error, but in my chrome developer inspector, I see the http request as “pending” – then all subsequent requests go into “pending” state too. In this state, they are never really sent out to the network - they get stuck within ionic bundle somewhere.
This problem does not exist in iOS
The code is pretty simple:
<span ng-repeat="monitor in monitors"> <img ng-src="http://server.com/monitorId=monitor?view=jpg" /> </span>
This results in around 6 GETs of images of size 600x400 and the images keep changing (the server keeps changing the image)
What I’ve observed specifically with Android is after a few successful iterations, the network HTTP GET behind this img ng-src gets stuck in pending like I said above and then all subsequent HTTP requests also get into pending and none of them ever get out of that state.
I am guessing there is some sort of limit for network queue that is getting filled up.
So how do I solve this issue?
a) One way I could think of is to put a timeout – but ng-src does not seem to have a time out function. My thought is on timeout, the http request would cancel - like in normal $http.get functions and this should help.
b) Maybe there is a way to flush all http requests. I saw in SO, someone created a new directive which needs to be added here: AngularJS abort all pending $http requests on route change --> but this needs me to replace http with this new directive --> while I am using img ng-src
c) Neither a nor c are ideal. I’d like to know what is really going on - why does Android balk at this while iOS does not (comparing Galaxy S3 with iPhone 5s). So if you have any other solutions, I’d love to hear them