How to show a loading message while preloading images in a for loop?
<p>I'm using this code to preload all the images I need</p>

<pre><code>var cache = [];
function preloadImages() {
    var i;

    $("#loading").html("loading...");
    for (i = 0; i &lt;= 180; i++) {
        var src = source.replace("###", i);

        var cacheImage = document.createElement("img");
        cacheImage.src = src;

        cache.push(cacheImage);
    }
    $("#loading").html("loading completed");
}
</code></pre>

<p>And with that $("#loading").html stuff I was expecting to wait untill the loop ends to change the content, but it does not happen. It writes almost instantaneously "loading complete", while firebug tells me that the images are still downloading.</p>

<p>How can I make this work as expected? Why is this not working as one may expect?</p>

<p>Thanks.</p>
