Search code examples
javascriptjqueryioshybrid-mobile-app

Image (both local and remote) loading error for iOS HTML5 App


I am building an iOS hybrid application that used Adobe Air and Javascript/HTML5. The HTML piece is included via StageWebView.

Once the app starts, the JS code loads an HTML, makes some HTTP requests and creates some images at run-time. Details below:

I am creating an image element using

$("<img/>").attr({'src': URL, 'id': IMAGE_ID}).load(function (evt){//Add this element to the DOM});

The image doesn't load and I see an error (see attached) in the Safari debugger. View a snapshot here: https://i.sstatic.net/utPMj.jpg (I don't have a great reputation here, hence the external link :-))

Note, that there is no response code to the requests. I have cross-checked on the server and a valid response (with right size data and status code 200) was indeed sent. Sometimes, even the local files fail to load. These local files are used via the css files, so you don't expect any JS foul-play either!

What is really odd that I can run the same piece of js through console in the debugger and it works fine.

I have looked into maximum JS execution limitations for iOS Safari and I have verified that it is not causing any problems.

Any inputs on this will be sincerely appreciated. If you are in the US, I am willing to tempt you with a Starbucks coupon. :)


Solution

  • It seems there is a bug in StageWebView that prevents adding image elements once the page load has completed.

    Two relevant links: 1. Bug Report: https://bugbase.adobe.com/index.cfm?event=bug&id=3336858 2. A discussion on Adobe Forum: http://forums.adobe.com/message/4238940

    The solution is to use a native alternative on iOS.