How to Control Flex 3 Image Control Caching

Question

According to the adobe flex docs: http://livedocs.adobe.com/flex/3/html/help.html?content=controls_15.html

Using an image multiple times

You can use the same image multiple times in your application by using the normal image import syntax each time. Flex only loads the image once, and then references the loaded image as many times as necessary.

However, in testing we have found that if you request the same image (same url, etc.) in IE flash 9/10 a new http request will not be issued, but with Firefox, Safari (PC and MAC) a new request is always issued.

I want to prevent the image from being pulled from the server each time I try and use it anyone have any idea why this is working only in IE?

Answer 1

The best way to load an image a single time and then reuse that image multiple times in a flex application is to embed the image and tie it to a class representation, then just reference that class from then on.

Example:

[Embed(source="myImage.jpg")]
[Bindable]
public var myImageClass:Class;

HTH

Answer 2

I've also had success with loading the Image once then reusing it's source property:

<mx:Image id="myImage" source='blah.png'/>

var myNewImage:Image = new Image();

myNewImage.source = myImage.source;

Answer 3

The real question isn't how to cache an image, but why does IE use a browser cached image when FF, Safari, Chrome, etc do not? (IE7 btw).

I'm still trying to come up with a reasonable sized example app. We have a canvas, with a mx:Image or mx:SWFloader. The canvas is recreated, however the image url is identical so the browser should be returning the cached image and not issuing another request for it. A very simple example of just an mx:Image where you set the source, clear the source and reset the source does correctly use the cached image across all browsers.

Answer 4

Here's the answer: NEVER think IE is doing it correctly. IE was wrong all the other browsers were correct. The .swf files were being returned with Cache-control: private header. IE should NOT have returned the cached image. Setting the Cache-Control header properly resulted in all browsers behaving as expected.

Answer 5

The problem is the Expiration Time of your images. Configure in the application server the policy for images expiration time and the cache runs OK in all browsers.

Answer 6

One workaround is to create your own image cache with ActionScript by saving the BitMapData of the original instance and using it as the source for subsequent instances:

private var image1:Image = new Image();    
private var image2:Image = new Image();        

private function init() : void
{
 image1.addEventListener(Event.COMPLETE, onComplete);
 image1.source = "icon.png";
 addChild(image1); 
}


private function onComplete(event:Event) : void
{ 
    var image:Image = event.target as Image;       
    var bitmapData:BitmapData = new BitmapData(image.content.width,
                                               image.content.height, true);    
    bitmapData.draw(image.content);   
    image2.source = new Bitmap(bitmapData);
    addChild(image2);
}

I created a fully functioning example and posted the source here.