Moo XLII (or, the JavaScript image pre-loading code entry)

At some point, my code for preloading images stopped working properly on Firefox. I'm thinking it happened around version 21-22, but I'm not totally sure. When trying to look for the "proper" way to do it, all I could find were articles from 1999-2000 talking about Netscape, how Internet Explorer stores its cache in the WINDOWS folder, how many people use dial-up, and how we should stock up on food for the Y2K crisis ahead. I ended up taking an idea from the jQuery documentation and wrote this function:

function preloadGraphics(files) {
    var count = files.length, i;
    $("#hiddenblock").html("");
    for (i = 0; i < count; i += 1) {
        $("#hiddenblock").append( $("<img src=\"" + files[i][0] + "\" alt=\"\" style=\"width:" + files[i][1] + "px;height:" + files[i][2] + "px;\" />") );
    }
}

For those not using jQuery, here's a non-jQuery version, which I tested once and it seemed to work:

function preloadGraphics(files) {
    var count = files.length, i, element;
    document.getElementById("hiddenblock").innerHTML = "";
    for (i = 0; i < count; i += 1) {
        element = new Image(files[i][1], files[i][2]);
        element.src = files[i][0];
        element.alt = "";
        document.getElementById("hiddenblock").appendChild(element);
    }
}

The function uses a hidden DIV with an ID of "hiddenblock" to put the newly created IMG elements. Any future runs of the function clears out the previous images and puts the new ones inside so that element doesn't get too large. (I have a page that constantly preloads new graphics, so if you walk away, you could come back and find your browser ran out of memory.) Anyway, the function takes a two-dimensional array consisting of files, widths, and heights, like this:

preloadGraphics( [ [ "file1.png", 65, 65 ], [ "file2.png", 120, 120 ], [ "file3.png", 80, 80 ] ] );

I'll put this out there so people can have some workable code tested on more recent browsers than Netscape or IE 5.