Skip navigation
JasonInfuse
Currently Being Moderated

stagewebview appending img src to divs

Feb 29, 2012 4:42 PM

Tags: #jquery #stagewebview #img #stagewebview_img #external_image

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.

 
Replies
  • Currently Being Moderated
    Mar 1, 2012 12:55 AM   in reply to JasonInfuse

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2012 11:01 AM   in reply to JasonInfuse

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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2012 5:42 PM   in reply to JasonInfuse

    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-e xample.html

    or write your own.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 28, 2012 12:23 PM   in reply to y.krutilin
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2014 1:38 AM   in reply to y.krutilin

    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.

    IMG_20140225_142709.jpg

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2014 8:46 AM   in reply to krustovnav

    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.

     

    As mentioned, you delayed your load, and I do wonder if it's simply an issue of you running a script before you assure the DOM is even ready (that breaks scripts every time). Setting the <body onload> should overcome this but try just the pure JavaScript method, no need for jQuery for this at all:

     

    e.g. HTML5 bare doc:

     

    <!DOCTYPE html>

    <html lang="en">

              <head>

                        <meta charset="utf-8">

                        <title>debug</title>

                        <script>

                         window.addEventListener('load',function(e){

                                   for (var i=0; i<20; i++)

                                  {

                                       // new image

                                       var img = new Image();

     

                                       // listener to verify when you should see the image

                                       img.addEventListener('load',function(e){

                                                 var ele = document.createElement('p');

                                                 ele.appendChild(document.createTextNode('Image ' + i + ' has been loaded!'));

                                                 document.body.appendChild(ele);

                                       });

     

                                        // load Adobe logo for example and add to DOM

                                       img.src = 'http://wwwimages.adobe.com/include/style/default/SiteHeader/logo.png';

                                       document.body.appendChild(img);

                                   }

                         });

                        </script>

              </head>

              <body>

              </body>

    </html>

     

    On iPad4 OS7:

     

    ipad4.png

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points