Caching images in Flex

Vikram singh — Mon, 25 May 2009 09:27:54 +0000

Caching of image data in your Flex application is one of the best ways to avoid loading those large images again and again, and this can improve performance and reduce overhead of loading external resources.

We are not discussing about using the cacheAsBitmap property to improve rendering performance or the cachePolicy property to speed up animations. Its the caching of actual bitmap data of an image. As the 2 are different in one case we just cache the image data of an image that has to be animated and component doesnot reload any image. in the other case we reload the data on demand for example user profile with display picture. In this case the picture mostly does not change (well it does but we can handle it differently) so we dont need to reload the image at each time the user profile data of the same person is called.. so we can impliment a cache here.

You’ll need a hash map to store the image data. A Dictionary or an associative array will also work just fine. Loading an image for the first time is the same as usual. You create a new Image object and add a listener for the COMPLETE event or it could be any of your custom event for the sake of example we will follow :

var image : Image = new Image ();
image.addEventListener (Event.COMPLETE, onImageLoad);

Once the image has finished loading, you add a copy of the bitmap data to the hash map using the image URL as the hash key as the URL for any image will always be distinct:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private var imageCache : hashMap = new hashMap();
// create hashmap only once

private function onImageLoad (event : Event) : void{
var image : Image = event.target as Image;
var imageURL : String = image.source;
if (! imageCache.containsKey (imageURL))
{
var bitmapData : BitmapData = new BitmapData
(image.content.width, image.content.height, true);
bitmapData.draw (image.content);
imageCache.put (imageURL, bitmapData);
}
}

The above method is called and the image is cached in the hash map. Now you can use the image as many times as we want without ever having to load it again. A good exapmle of this could be loading user profile whenever you reload the profile data one need not fetch the user profile picture. the picture can directly be accessed from the hashmap.

How do we use the image we stored, Its simple you need to check the hash map each time you call for the loading the image just check if you’ve already cached it:

1
2
3
4
5

// check the hashmap when ever next you want to load the image

if (imageCache.containsKey (imageURL)){
image.source = new Bitmap (imageCache.getValue (imageURL));
}

thats it now you can use the cache whenever required.

Export to Jpeg in flex.

FlexOut » caching

Caching images in Flex