Question

I’ m writing a web app that needs to load dynamically a lot of images.
I wrote an utility function, loadMultipleImages, that takes care of loading them and calling (possibly optional) callbacks whenever:

• a single image is loaded
• an error is encountered (a single image can’t load)
• all the images are loaded without errors

I invoke it like this (you can find a complete example here):

var imageResources = [];
        var mulArgs = {multipleImages: [],
                        onComplete: this.afterLoading.bind(MYAPP),
                        onError: this.logError.bind(MYAPP)
        }

imageResources = ["imageA_1.png", "imageA_2.png"];
mulArgs.multipleImages.push ({ID: "imageA_loader", imageNames : imageResources});
        
imageResources = ["imageB_1.png", "imageB_2.png"];
mulArgs.multipleImages.push ({ID: "imageB_loader", imageNames : imageResources});

 //Lots of more images 

 var mImageLoader = new loadMultipleImages (mulArgs);

As soon as I create my loadMultipleImages object, it loads the images and calls the afterLoading() function after they are all loaded (or logError() if there’s some problem). Then I can access to the images with:

MYAPP.afterLoading = function (loaders) {
    // Just an example
    var imageA_array = loaders["imageA_loader"].images;
    var imageB_first = loaders["imageB_loader"].images[0];
 }

By the way, I’m thinking that I’m reinventing the (possibly square) wheel. Is there a lightweight, simple library that does that better than I’m doing? Or simply a better method that spares me the burden of maintaining the loadMultipleImages code?

Answer 1

http://jsfromhell.com/classes/preloader