Jump to content
GreenSock

GrahamS

ImageLoader: multiple dimensions of a single photo

Recommended Posts

Is there an easy method of loading in a single URL and using different dimensions of said single URL? I'm attempting to just use one photo for both a thumbnail and full-size version. I've found that if I attempt something along the lines of:

 

image_Loader.append(new ImageLoader(coreXML.menuItem[i].image));
image_Loader.append(new ImageLoader(coreXML.menuItem[i].image, {width:50, height:50}));

 

... it just loads them in at the small size as I assume I would need two separate "image_Loader"s, i.e. thumb_Loader and image_Loader. However, was hoping there would be an easier method of doing the same thing?

 

I've also found that if I only load it in once and refer to it again, it is removed from the first instance (so I assume at the minimum I need to load the image twice?).

 

I can further explain if what I'm trying to attempt is unclear.

 

Thanks!

Link to comment
Share on other sites

Hmmm, actually if you try to load the same image twice, ImageLoader is optimized to simply copy the BitmapData from the first ImageLoader that loaded that image.

 

Are you using a recent version of ImageLoader? Please grab the latest GreenSock files and give it another try. I can supply and example later this afternoon.

 

-c

Link to comment
Share on other sites

Here is an example:

 

http://www.snorkl.tv...der_ReUseImage/

 

 

var queue:LoaderMax = new LoaderMax({ maxConnections:1,
onprogress:queueProgressHandler,
onComplete:queueCompleteHandler,
onChildProgress:imageProgressHandler,
onChildComplete:imageCompleteHandler
});


queue.append(new ImageLoader("whale.png", {container:this, alpha:0, y:0, x:200, estimatedBytes:60000}));
queue.append(new ImageLoader("whale.png", {container:this, width:200, height:125, alpha:0, x:0, y:0, estimatedBytes:60000}));

queue.load();

 

notice that maxConnections:1 is set on the LoaderMax, This is to ensure that the large version of the image is fully loaded before the 2nd ImageLoader tries to load the same image. If the large image is loaded, then the 2nd ImageLoader will be able to automatically get a copy of the first ImageLoader's BitmapData and no additional requests are made to the server.

 

Using Chrome's dev tools you can see that only 1 request is made to the server as shown in the image below

 

Screen shot 2012-11-25 at 1.55.21 PM.png

 

If the first (large) ImageLoader isn't fully loaded before loading the 2nd (small) ImageLoader then you would see 2 requests for whale.png.

 

I have attached a CS5 fla with image for you to experiment with.

ImageLoader_ReUseImage.zip

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×