//The constructor for the ImagePreloader takes an array of image URLs and a call-back function as arguments.
function ImagePreloader(images, callBack) {
// store the callBack
this.callBack = callBack;
// initialize internal state.
this.nLoaded = 0;
this.nProcessed = 0;
this.aImages = new Array;
// record the number of images.
this.nImages = images.length;
// for each image, call preload()
for ( var i = 0; i < images.length; i++ ) {
this.preload(images[i]);
}
}
//The call-back function is stored for later use, then each image URL is passed
//into the preload() method.
ImagePreloader.prototype.preload = function(image) {
// create new Image object and add to array
var oImage = new Image;
this.aImages.push(oImage);
// set up event handlers for the Image object
oImage.onload = ImagePreloader.prototype.onload;
oImage.onerror = ImagePreloader.prototype.onerror;
oImage.onabort = ImagePreloader.prototype.onabort;
// assign pointer back to this.
oImage.oImagePreloader = this;
oImage.bLoaded = false;
// assign the .src property of the Image object
oImage.src = image;
}
//The preload function creates an Image object and assigns functions for the three Image events;
//onload, onerror and onabort. The onload event is raised when the image has been loaded into memory,
//the onerror event is raised when an error occurs while loading the image and the onabort event
//is raised if the user cancels the load by clicking the Stop button on the browser.
//A pointer to the ImagePreloader object is stored in each Image object to facilitate thcallBackck
//mechanism. An optional boolean flag can be added here to indicate whether the image loads properly or not.
//Finally, the “src” attribute is assigned to start the loading of the image.
ImagePreloader.prototype.onComplete = function() {
this.nProcessed++;
if ( this.nProcessed == this.nImages ) {
this.callBack(this.aImages, this.nLoaded);
}
}
ImagePreloader.prototype.onload = function() {
this.bLoaded = true;
this.oImagePreloader.nLoaded++;
this.oImagePreloader.onComplete();
}
ImagePreloader.prototype.onerror = function() {
this.bError = true;
this.oImagePreloader.onComplete();
}
ImagePreloader.prototype.onabort = function() {
this.bAbort = true;
this.oImagePreloader.onComplete();
}
var img01 = new Image();
var img02 = new Image();
var img03 = new Image();
new ImagePreloader([img01, img02, img03], function() { // 第一引数に配列として各オブジェクトを渡す
// ここにdrawImage()メソッドなどの画像表示処理を入れる
};
img01.src = 'image01.png?' + new Date().getTime(); // 「?」以下はIEでキャッシュ済みと認識されないためのハック
img02.src = 'image02.png?' + new Date().getTime();
img03.src = 'image03.png?' + new Date().getTime();