You shouldn't make anything synchronous (not even AJAX) calls but instead simply put your code in the appropriate callback:
function loadSprite(src, callback) {
var sprite = new Image();
sprite.onload = callback;
sprite.src = src;
}
Then use it like this:
loadSprite('sprites/sheet1.png', function() {
// code to be executed later
});
If you want to pass additional arguments, you can do it like this:
sprite.onload = function() {
callback(whatever, args, you, have);
};
If you want to load multiple elements and need to wait for all of them to finish, consider using the jQuery deferred object:
function loadSprite(src) {
var deferred = $.Deferred();
var sprite = new Image();
sprite.onload = function() {
deferred.resolve();
};
sprite.src = src;
return deferred.promise();
}
In the function loading the sprites, you do something like this:
var loaders = [];
loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
// callback when everything was loaded
});
http://api.jquery.com/jQuery.when/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…