Voor een spelletje gebruik ik een Loader object om bestanden in te laden (in dit geval 648 geluidsbestandjes).
Maar omdat er zoveel ingeladen moet worden crasht de website en loopt de browser vast (als het te lang duurt). Hoe los ik dit op?
Dit is het Loader object:
/**
* @class Loader
* @param {Client} parent
*/
var Loader = function Loader(parent)
{
/**
* @returns {Array}
*/
this._imageDataList;
/**
* @returns {Uint}
*/
this._imagesLoaded;
/**
* @returns {Array}
*/
this._soundDataList;
/**
* @returns {Uint}
*/
this._soundsLoaded;
/**
* @returns {Client}
*/
this.parent;
/**
* @constructor
*/
{
/* Initialize image data list */
this._imageDataList = [];
/* Initialize images loaded */
this._imagesLoaded = 0;
/* Initialize sound data list */
this._soundDataList = [];
/* Initialize sounds loaded */
this._soundsLoaded = 0;
/* Initialize parent */
this.parent = parent;
};
};
/**
* @method _loadImage
* @syntax Loader._loadImage(imageData)
* @param {Object} imageData
* @returns {Loaded}
* @private
*/
Loader.prototype._loadImage = function(imageData)
{
/* Initialize self */
var self = this;
/* Create image */
var image = jQuery('<img>');
/* Set source */
image.attr('src', imageData.path + imageData.name + '.' + imageData.extension);
/* Set data path */
image.attr('data-path', imageData.path);
/* Set data name */
image.attr('data-name', imageData.name);
/* Set data extension */
image.attr('data-extension', imageData.extension);
/* Add event listener */
image.one('load', function()
{
/* Increase images loaded */
self._imagesLoaded++;
/* Add asset */
self.parent.assets.addImage(jQuery(this));
});
/* Return this */
return this;
};
/**
* @method _loadSound
* @syntax Loader._loadSound(soundData)
* @param {Object} soundData
* @returns {Loaded}
* @private
*/
Loader.prototype._loadSound = function(soundData)
{
/* Initialize self */
var self = this;
/* Create sound */
var sound = jQuery('<audio>');
/* Loop trough list of extensions */
for (var i = soundData.extensions.length - 1; i >= 0; i--)
{
/* Create source */
var source = jQuery('<source>');
/* Set source */
source.attr('src', soundData.path + soundData.name + '.' + soundData.extensions[i]);
/* Set data extension */
source.attr('data-extension', soundData.extensions[i]);
/* Append source to sound */
sound.append(source);
}
/* Set data path */
sound.attr('data-path', soundData.path);
/* Set data name */
sound.attr('data-name', soundData.name);
/* Add event listener */
sound.one('canplaythrough', function()
{
/* Increase sounds loaded */
self._soundsLoaded++;
/* Add asset */
self.parent.assets.addSound(jQuery(this));
});
/* Return this */
return this;
};
/**
* @method _loadImages
* @syntax Loader._loadImages()
* @returns {Loader}
* @private
*/
Loader.prototype._loadImages = function()
{
/* Loop trough image data list */
for (var i = this._imageDataList.length - 1; i >= 0; i--)
{
/* Load image */
this._loadImage(this._imageDataList[i]);
}
/* Return this */
return this;
};
/**
* @method _loadSounds
* @syntax Loader._loadSounds()
* @returns {Loader}
* @private
*/
Loader.prototype._loadSounds = function()
{
/* Loop trough sound data list */
for (var i = this._soundDataList.length - 1; i >= 0; i--)
{
/* Load sound */
this._loadSound(this._soundDataList[i]);
}
/* Return this */
return this;
};
/**
* @method addImage
* @syntax Loader.addImage(path, name, extension)
* @param {String} path
* @param {String} name
* @param {String} extension
* @returns {Loaded}
* @public
*/
Loader.prototype.addImage = function(path, name, extension)
{
/* Add image data to image data list */
this._imageDataList.push(
{
path: path,
name: name,
extension: extension
});
/* Return this */
return this;
};
/**
* @method addSound
* @syntax Loader.addSound(path, name, extension)
* @param {String} path
* @param {String} name
* @param {Array} extensions
* @returns {Loaded}
* @public
*/
Loader.prototype.addSound = function(path, name, extensions)
{
/* Add sound data to sound data list */
this._soundDataList.push(
{
path: path,
name: name,
extensions: extensions
});
/* Return this */
return this;
};
/**
* @method progress
* @syntax Loader.progress()
* @returns {Uint}
* @public
*/
Loader.prototype.progress = function()
{
/* Calculate total */
var total = (this._imageDataList.length + this._soundDataList.length);
/* Calculate total loaded */
var totalLoaded = this._imagesLoaded + this._soundsLoaded;
/* Return progress */
return ((100 / total) * totalLoaded).toFixed(2);
};
/**
* @method run
* @syntax Loader.run()
* @returns {Loader}
* @public
*/
Loader.prototype.run = function()
{
/* Load images */
this._loadImages();
/* Load sounds */
this._loadSounds();
/* Return this */
return this;
};
