JS Image Loader

{imgTitle: imgSrc}

by Santiago J

HTML

<div id="progress">0%</div>

JavaScript

function loadImages(images, ontick) {
    if (typeof images !== "object") return null;
    var imgDir = {},
        imgLoaded = null,
        n = 0,
        len = 0,
        img, i;

    for (i in images) len++;
    if (typeof ontick === "function") {
        imgLoaded = function(){ n++; ontick(n >= len ? imgDir : null, n, len); };
    }
    for (i in images) {
        img = imgDir[i] = new Image();
        if (imgLoaded !== null) img.onload = imgLoaded;
        img.src = images[i];
    }
    return imgDir;
}

window.onload = function() {
    var progress = document.getElementById("progress");
    loadImages({
        "derpy": "http://dl.dropbox.com/u/416738/img/Derpy/derpy_stand_left.gif",
        "luna": "http://dl.dropbox.com/u/416738/img/Princess_Luna/Stand_Left.gif",
        "pinkie": "http://dl.dropbox.com/u/416738/img/Pinkie/stand_Pinkiepie_left.gif"
    }, function(imgDir, i, n){
        progress.innerHTML = (100 * i / n | 0)+"%";
        if (imgDir === null) return;
        // if images loaded:
        progress.style.display = "none";
        for (var i in imgDir) document.body.appendChild(imgDir[i]);
    });
}