1 Reply Latest reply on Aug 29, 2006 2:54 PM by peterent

    Displaying the Same Image in Two Different Image Controls

    jbutterfield
      We are using Flex 2 to dynamically display a large image (2 MB+) that is downloaded from an external web server on a different domain. We would like to take that same image, scale it down, and display it in along side the fullsize version of the image in a little thumbnail viewer that we have written. This works fine if I simply set the source attributes on the two Image controls to the same URL, however, this results in the Image being downloaded twice. Since the image is so large, this is not very desirable behavior.

      Another option that we have tried is cloning the bitmapData after one of the images has finished loading and then handing the clone to the second image control.

      private function image1Loaded(e:Event) : void
      {
      var bmp1:Bitmap = Bitmap(image1.content);
      image2.source = new Bitmap(bmp1.bitmapData.clone());
      }

      The problem with this method, is that since the image is being downloaded from a server with a different domain from our web server, a security sandbox exception is thrown. Since we do not have access to that web server, using a crossdomain.xml file is not an option. We've considered proxying the image through our web server, but considering the size of the image, this isn't the best solution either.

      Does anybody know of a way to do what we are trying to do without generating a security exception? We don't need to modify the image in anyway, we just want to display it inside two different Image controls without having to download it twice.
        • 1. Re: Displaying the Same Image in Two Different Image Controls
          peterent Level 2
          The image should not be downloaded twice. The Flash Player is very picky about that because of the problems you mention. If you download an image from a specific URL and then try to do it again, the image will have been cached.

          However, if you do this: <mx:Image source="imageURL" /> <mx:Image source="imageURL" /> the image may in fact be loaded twice. Why? Because 2 requests are being sent out at the same time since neither image has been loaded. This results in the image being loaded twice.

          If you have a large image to display, wait for it to load once before making the second request. The Image's complete event will tell you when its bytes have been received.