I'm writing a simple image pre-loader and here are the 2 relevant functions with the simple "constructor" at top:
//Default constructor
var ImagePreLoader = function()
{
//Init class members
this._m_vImagePaths = null;
this._m_fpOnFinishedLoadAllImages = null;
this._m_nNumImagesPreLoaded = null;
this._m_mPathsToImages = {};
};
//Preloads all images passed in the 0-indexed vImagePaths string array and calls fpOnFinishedLoadAllImages when they've all finished loading
ImagePreLoader.prototype.PreLoadImages = function(vImagePaths, fpOnFinishedLoadAllImages)
{
//Shallow-copy the array of path strings. (Cloning the strings is unnecessary since JavaScript strings are immutable.)
this._m_vImagePaths = vImagePaths.slice(0);
//Save the callback
this._m_fpOnFinishedLoadAllImages = fpOnFinishedLoadAllImages;
//Create images from each path, causing them to load.
for (var i = 0; i < this._m_vImagePaths.length; ++i)
{
//Set image to load
var pLoadingImage = new Image();
pLoadingImage.onload = this._OnImageLoad();
pLoadingImage.src = this._m_vImagePaths[i];
//Save the Image object
this._m_mPathsToImages[this._m_vImagePaths[i]] = pLoadingImage;
}
//No images have been pre-loaded yet
this._m_nNumImagesPreLoaded = 0;
};
//Internal function handling a single image pre-loading. Invokes the callback if all have been preloaded.
ImagePreLoader.prototype._OnImageLoad = function(value)
{
this._m_nNumImagesPreLoaded++;
if (this._m_nNumImagesPreLoaded === this._m_vImagePaths.length && this._m_fpOnFinishedLoadAllImages !== null)
{
this._m_fpOnFinishedLoadAllImages();
}
}
I'm then calling it with:
//Test pre-loader
var vImagePaths = ["textures/Ball.png", "textures/Block.png"];
var pImagePreLoader = new ImagePreLoader();
pImagePreLoader.PreLoadImages(vImagePaths, OnPreloadFinished);
As written, this code works as I want it to. Specifically "this" refers to the ImagePreLoader object in _OnImageLoad.
But what's confusing me is this line:
pLoadingImage.onload = this._OnImageLoad();
If I remove the parentheses after OnImageLoad like:
pLoadingImage.onload = this._OnImageLoad;
then "this" seems to refer to the global space while in OnImageLoad. If I'm understanding things correctly, that's because OnImageLoad is not being called on an object whenever it gets invoked. What I don't understand is why putting the parentheses "fixes" it. (Or even if it's actually fixing it or just appearing to work for this case, but actually doing something dangerous.)
Any chance I got get an explanation of exactly what's going on? Thanks for any help!
