Preloading images with JavaScript & jQuery

I am using the following code to insert some HTML in a div and to preload any images that may be contained in that HTML (the html var data is actually retrieved from the AJAX request in real code). This is to prevent the browser from loading the extracted HTML images by showing the div (using the slideDown event) because it breaks the flow when the image is loaded from the middle of the transition. I guess I could use interlaced JPEG so that the image dimensions are known almost immediately, but obviously it would be nice to develop a cleaner method.: P

var html = '<img src="images/test.jpg" alt="test" />';

$('div.content').hide().html(html);

$('div.content img').each(function(){

    var img = new Image();

    img.src = $(this).attr('src');

    $(this).attr('src', img.src);

});

$('div.content').slideDown('normal');

      

        
        
        
      

    

I'm using the Image object and then assigning it as recommended here , but unfortunately the image is still not cached by the browser using this method because the sildeDown () effect still breaks as the image loads.

Any help or alternative methods? Many thanks.

Edit - 21 Sep 09

Progress! It turns out the browser was caching the image, I just didn't give it time to do it (it just took a second to load with alert () or setInterval ()). Now, imagining what is arguably the most messy code - I'm using an infinite loop to create that pause.

The new method extends the old code above by binding a function (which adds each src image to an array) to this successful image load event. Then it gets stuck in an infinite loop while it waits for all the images to load and hence appear in the array. This seems to work as a way to preload images synchronously, but the problem remains; the while () loop loops endlessly for whatever reason even after all images have loaded, unless I add an alert () to pause it for a moment.

New code:

var html = '<img src="images/test.jpg" alt="test" />';

$('div.content').hide().html(html);

// define usr variables object
$.usrvar = {};

// array of loaded images' urls
$.usrvar.images = [];

// boolean for whether this content has images (and if we should check they are all loaded later)
$.usrvar.hasimages = false;

// foreach of any images inside the content
$('div.content img').each(function(){

    // if we're here then this content has images..
    $.usrvar.hasimages = true;

    // set this image src to a var
    var src = $(this).attr('src');

    // add this image to our images array once it has finished loading
    $(this).load(function(){

        $.usrvar.images.push(src);

    });

    // create a new image
    var img = new Image();

    // set our new image src
    img.src = src;

});

// avoid this code if we don't have images in the content
if ($.usrvar.hasimages != false) {

    // no images are yet loaded
    $.usrvar.imagesloaded = false;

    // repeatedly cycle (while() loop) through all images in content (each() loop)
    while ($.usrvar.imagesloaded != true) {

        $('div.content img').each(function(){

            // get this loop image src
            var src = $(this).attr('src');

            // if this src is in our images array, it must have finished loading
            if ($.usrvar.images.indexOf(src) != -1) {

                // set imagesloaded to trueai
                $.usrvar.imagesloaded = true;

            } else {

                // without the pause caused by this alert(), this loop becomes infinite?!
                alert('pause');

                // this image is not yet loaded, so set var to false to initiate another loop
                // (ignores whether imagesloaded has been set to true by another image, because ALL
                // need to be loaded
                $.usrvar.imagesloaded = false;

            }

        });

    }

}

$('div.content').slideDown('normal');