PreloadJS load external image

vyf5ter's Avatar


30 May, 2012 02:28 PM


I have just started looking at CreateJS and must admit I am not finding may examples of code online. I am a AS3 developer with no JavaScript experience having some trouble connecting the dots to get me going.

I have managed to load an external image onto my canvas:

background = new Bitmap("images/background.jpg");
background.regX = 0;
background.regY = 0;

So I remove the above and try to use PreloadJS in order to display a progress info while the image loads

var assetloader = new PreloadJS();
assetloader.loadFile("images/background.jpg", false);

assetloader.progress = assetLoaderProgress();
assetloader.onComplete = assetLoaderComplete();

// in assetLoaderComplete background = new Bitmap(assetloader.getResult);
background.regX = 0;
background.regY = 0;

I see my console.log() messages for both assetLoaderProgress and assetLoaderComplete which tells me that they are both being fired but I don't know what to target in order to display the image. Are there any online resources that could help me out with this?


  1. Support Staff 1 Posted by Lanny McNie on 30 May, 2012 03:35 PM

    Lanny McNie's Avatar

    We have put up a ton of examples in each github repo, and lots of them are on our website as well.!/EaselJS (scroll down)

    There are a few issues with your code.

    1. assetLoader's progress handlers are "onProgress" for overall queue progress, and "onFileProgress" for individual file progress.

    2. To access the result, you can use the "onFileLoad" callback, which contains the file that was just loaded (on the "result" property of the event object). To access it otherwise, you need to pass the id/url to getResult function:


    It is recommended that you use an ID when loading assets to make it easier to access them:

    assetLoader.loadFile({id:"image", src:"images/background.jpg"});
    var image = assetLoader.getResult("image");
  2. 2 Posted by vyf5ter on 31 May, 2012 07:31 AM

    vyf5ter's Avatar

    Thx for the reply.

    I see that you make reference to both of these events. What is the difference between the two?

    preload.onComplete = handleComplete;
    preload.onFileLoad = handleFileLoad;

    I do not see a method called handleComplete in the sample code

  3. Support Staff 3 Posted by Lanny McNie on 31 May, 2012 02:28 PM

    Lanny McNie's Avatar

    onComplete is fired when the entire queue is processed.
    onFileLoad is fired after an individual file has completed loading.

    The demo only ended up using the onFileLoad -- we should remove the onComplete handler.

  4. Lanny McNie closed this discussion on 31 May, 2012 02:28 PM.

  5. vyf5ter re-opened this discussion on 18 Jun, 2012 08:06 AM

  6. 4 Posted by vyf5ter on 18 Jun, 2012 08:06 AM

    vyf5ter's Avatar

    Thx for the reply

  7. Lanny McNie closed this discussion on 06 Sep, 2012 04:20 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac


19 May, 2015 04:06 PM
17 May, 2015 04:51 PM
15 May, 2015 08:20 PM
14 May, 2015 03:45 PM
13 May, 2015 10:39 AM
12 May, 2015 06:07 PM