Oh and a quick side note: I can use the append command and insert text. It is only the img src that seems to be causing problems.
Does appending anothr HTML element like a <span> work?
I wonder if preloading the image will work? I know it is a workaround, but sometimes you have to do those things
Yeah I have tried spans with the same result. Preloading does solve the problem but is not really an option because the images being loaded are dynamic. Good thought though.
Try to isolate a jquery issue (you should be using jquerymobile if possible). Try using pure JS:
var img = new Image();
img.src = 'http://www.somewhere.com/a.png';
I met same issue. Seems there is a bug in Adobe StageWebView component. And this issue can be reproduced only in iOS. On Android and desktop it is ok.
I solved this issue by using native extension:
It is paid, but you can find open source versions, like that one:
or write your own.
We are still experiencing this problem. We tried it with multiple Air versions, but it never made a difference. The problems still arose in Adobe 3.1 to Adobe Air 4.0.
After extensive tests and different approaches, we discovered that it doesn't really matter how/where the images were defined. Defining the image via the src attribute or in a CSS class, the outcome was the same: SOME images didn't load. Sometimes no images at all.
Here for example, no images were loaded at all. The area marked in green is an image tag.
The red boxes are background images that are defined in the CSS (ignore the black boxes for now). The CSS is interpreted correctly. All the dimensions are correctly rendered,
but none of the background images are loaded.
All the DOM elements are appended to the DOM, once the page is loaded and the asynchronous requests are finished.
I removed all the asynchronous requests, just to make sure that this wasn't causing the conflict. But as you can imagine, that wasn't causing the issues.
I inserted callback functions to the load events of image tags we were appending. We never received an answer for that request.
So I delayed another request (200ms) and voilà: We got a response and were able to load the image correctly.
Unfortunately, we can't do that for images that are defined in the CSS. The browser itself will make the request, once the image is needed.
I somehow have the feeling that simultaneous requests (within milliseconds) are causing the problems. As you can see there are black squares within the red boxes.
These squares are also images and together form custom checkboxes. As I stated earlier, the CSS is rendered/interpreted correctly, so the bounding boxes of the elements are correct.
Only the background images are missing. So when I click on the "transparent" checkbox, a click event is fired that toggles the checked state of that checkbox. This will fire a request for an image,
because in the checked class an image is defined. And as you can see, these are loaded just fine.
You say this is still an issue in AIR 4.0? I wonder if AIR is restricting the browsers events (which run on a separate thread). Perhaps that thread is somehow unavailable.
e.g. HTML5 bare doc:
for (var i=0; i<20; i++)
// new image
var img = new Image();
// listener to verify when you should see the image
var ele = document.createElement('p');
ele.appendChild(document.createTextNode('Image ' + i + ' has been loaded!'));
// load Adobe logo for example and add to DOM
On iPad4 OS7:
Closures get me every time.. (i = 20 every time by the time the event fires).. Disregard that . All 20 logos loaded just fine, and fast.
That said, I bought darkredz ANE anyhow, I like the VideoPlayer as much as easy AS3<->JS.