Skip to main content
J
JasonInfuse
Known Participant
March 1, 2012
Answered

stagewebview appending img src to divs

  • March 1, 2012
  • 3 replies
  • 3788 views

I have been trying to figure this out for hours and just can't get it.

I have an ios app that I built with air 3.0. In this app I launch a stagewebview. I have different event and event listeners that make javascript (jquery) calls to load new images.

The Problem:

First off this work fine in preview. I only get the problem when I have it installed on the ipad. I am appending img srcs to divs but nothing happens. The image is never downloaded and never appears on the page.

Here is a really simple example:

<head>

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

function loadPage(projectJSONString)

{

    $('#container').append('<img src="http://www.someurl/someimage.jpg" />');

}

</script>

</head>

<body onload="loadPage()">

<div id="container">

</div>

</body>

</html>

the body tag has an onload event that calls a javascript function which simply trys to append an image to the div with an id "container".

Works fine in preview (given that you put an actual img src url) but doesn't work once it is on the ios device.

Please please help.

This topic has been closed for replies.
Correct answer y_krutilin

Hello,

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:

http://darkredz.com/ios-uiwebview-and-videoplayer-native-extension-for-air-mobile/

It is paid, but you can find open source versions, like that one:

http://matthewhx.blogspot.com/2012/04/uiwebview-native-extension-ios-example.html

or write your own.

3 replies

y_krutilin
y_krutilinCorrect answer
Participant
September 18, 2012

Hello,

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:

http://darkredz.com/ios-uiwebview-and-videoplayer-native-extension-for-air-mobile/

It is paid, but you can find open source versions, like that one:

http://matthewhx.blogspot.com/2012/04/uiwebview-native-extension-ios-example.html

or write your own.

y_krutilin
y_krutilin
Participant
September 28, 2012

btw reported bug https://bugbase.adobe.com/index.cfm?event=bug&id=3336858

K
krustovnav
Participant
February 27, 2014

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.

sinious
sinious
Legend
March 1, 2012

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';

document.getElementById('container').appendChild(img);

J
JasonInfuseAuthor
Known Participant
March 1, 2012

Ok I am able to get images loading from an onload event. But if I try to call a javascript function from actionscript images wont load (jquery or javascript). It appears that you can't add images to the DOM once the page pauses loading anything.

J
JasonInfuseAuthor
Known Participant
March 1, 2012

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.

Projectitis
Projectitis
Inspiring
March 1, 2012

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

J
JasonInfuseAuthor
Known Participant
March 1, 2012

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices