Preloading Images in JavaScript

In order to display an image in JavaScript, you can create a new Image element, set its src property to the URL of an image file, and then append it to the HTML document. However, loading the image can take a moment, so after you set the src property, Javascript doesn’t wait for the load to complete. Instead, it very helpfully continues running through the rest of the program, and the image will just load when it loads.

The only problem with this very helpful behavior is that it often isn’t very helpful. In fact, in my experience I find it’s almost never what I want. If you’re trying to do a bunch of graphics operations using images from files, it’s kind of important that they actually be fully loaded before you start doing stuff with them. Otherwise, you might end up with unpredictable results, and a lot of blank canvas where the images are supposed to be.

Therefore, I’ve written this “image preloader”, which takes the oh-so-asynchronous process of loading images from files and makes it a little more synchronous. Or at least, it hides a bunch of little asynchronous processes behind one big one.

In order to use this test program, you’ll need some image files for it to load. These files are provided below, and are called “SquareBlue.png”, “SquareGreen.png”, “SquareRed.png”, and “SquareYellow.png”. Copy them to the directory containing your .js file before running it.

var program = new ImageLoaderTest();

function ImageLoaderTest()
    this.main = function()
        this.imageLoader = new ImageLoader
            new Array
                new ImageLoadingData("squareBlue", "SquareBlue.png"),
                new ImageLoadingData("squareGreen", "SquareGreen.png"),
                new ImageLoadingData("squareRed", "SquareRed.png"),
                new ImageLoadingData("squareYellow", "SquareYellow.png")

    function main2()
        var imagesToDraw = new Array

        var drawPosX = 0;

        for (var i = 0; i < imagesToDraw.length; i++)
            var imageToDraw = imagesToDraw[i];

   = "absolute";
   = drawPosX;
   = 0;

            drawPosX += imageToDraw.width * 2;

function ImageLoader(imageDatasToLoad, contextForCallback, callbackForLoadingComplete)
{ = "ImageLoader";
    this.imageDatasToLoad = imageDatasToLoad;
    this.contextForCallback = contextForCallback;    
    this.callbackForLoadingComplete = callbackForLoadingComplete;
    this.numberOfImagesLoadedSoFar = 0;

    this.imageLookup = new Array();

    for (var i = 0; i < this.imageDatasToLoad.length; i++)
        var imageData = this.imageDatasToLoad[i];

        var image = new Image();
        image.imageLoader = this;
        image.onload = imageLoaded; =;
        image.src = imageData.url;

        this.imageLookup[] = image;

    function imageLoaded(event)
        var imageLoader =;

        if (imageLoader.numberOfImagesLoadedSoFar >= imageLoader.imageDatasToLoad.length)

function ImageLoadingData(id, url)
{ = id;
    this.url = url;
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s