Can I sync up multiple image onload calls?
If you can't use something like jQuery, create a helper function that you can pass to the onload
of all your images you are interested in. Each time it is called, increment a counter, or add the src
name to a set. Once the counter or your set reaches the size of all of the images that you are expecting, then you can fire off whatever work you really wanted to do.
Something like:
var imageCollector = function(expectedCount, completeFn){
var receivedCount;
return function(){
if(++receivedCount == expectedCount){
completeFn();
}
};
}();
var ic = imageCollector(2, function(){alert("Done!");});
Image1.onload = ic;
Image2.onload = ic;
This fiddle might help. It's a simple generic 'loader'.
http://jsfiddle.net/8baGb/1/
And the code:
// loader will 'load' items by calling thingToDo for each item,
// before calling allDone when all the things to do have been done.
function loader(items, thingToDo, allDone) {
if (!items) {
// nothing to do.
return;
}
if ("undefined" === items.length) {
// convert single item to array.
items = [items];
}
var count = items.length;
// this callback counts down the things to do.
var thingToDoCompleted = function (items, i) {
count--;
if (0 == count) {
allDone(items);
}
};
for (var i = 0; i < items.length; i++) {
// 'do' each thing, and await callback.
thingToDo(items, i, thingToDoCompleted);
}
}
function loadImage(items, i, onComplete) {
var onLoad = function (e) {
e.target.removeEventListener("load", onLoad);
// this next line can be removed.
// only here to prove the image was loaded.
document.body.appendChild(e.target);
// notify that we're done.
onComplete(items, i);
}
var img = new Image();
img.addEventListener("load", onLoad, false);
img.src = items[i];
}
var items = ['http://bits.wikimedia.org/images/wikimedia-button.png',
'http://bits.wikimedia.org/skins-1.18/common/images/poweredby_mediawiki_88x31.png',
'http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png',
'http://upload.wikimedia.org/wikipedia/commons/3/38/Icons_example.png'];
loader(items, loadImage, function () {
alert("done");
});