9 Replies Latest reply: Feb 27, 2014 8:46 AM by sinious RSS

    stagewebview appending img src to divs

    JasonInfuse

      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.

        • 1. Re: stagewebview appending img src to divs
          JasonInfuse Community Member

          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.

          • 2. Re: stagewebview appending img src to divs
            Pea Community Member

            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

            • 3. Re: stagewebview appending img src to divs
              JasonInfuse Community Member

              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.

              • 4. Re: stagewebview appending img src to divs
                sinious Community Member

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

                • 5. Re: stagewebview appending img src to divs
                  JasonInfuse Community Member

                  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.

                  • 6. Re: stagewebview appending img src to divs
                    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.

                    • 8. Re: stagewebview appending img src to divs
                      krustovnav

                      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.

                      • 9. Re: stagewebview appending img src to divs
                        sinious Community Member

                        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.