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?

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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;

View more solutions