javascript: wait for image used in code to load
<p>Ive had a problem that I cant fix while creating an image carousel in javascript. I am using jcarousel with a few "hacky" modifications to allow images with different widths (portrait/landscape)
the end result is I am using some code that looks like this</p>

<pre><code>function mycarousel_itemAddCallback(carousel, first, last, dir)
{
    var thumbdir = 'gallery/' + dir + '/thumbs/' //set the thumbs dir
    var fulldir = 'gallery/' + dir + '/full/' //set the full images dir
    for (i = 0; i &lt; 21; i++) {
        var no = i+1; //number image we are on
        var img = new Image(); //make a new image
        img.src = thumbdir + no + '.jpg'; //set its source
        var fullimg = fulldir + no + '.jpg'; //set full omages source as well
        var html = mycarousel_getItemHTML(img.src, fullimg, img.width); //make some html for the image, with width
        carousel.add(i+1, html, img.width); //add the image to the carousel, with width passed in
        tagID = 'jcarousel-item-' + no; //get the css tag of the image just added
        changeStyle(tagID, img.width); // force its height in inline css to prevent bugs
    }
</code></pre>

<p>Now essentially, the problem seems to be that "img.width" ends up being 0 because the image has not yet loaded. this means all the images in the gallery end up having a width of 0 and are therefore not visible. refresh the page (so all the images are in the cache already) and everything works fine again, with "img.width" the correct value.</p>

<p>forcing a pause after setting the image to load with an alert allows img.width to become the right value, but obviously that's a horrible workaround.
can anyone suggest a way of allowing the javascript to load the image, and get its size right, before continuing the script?</p>

<p>thanks in advance for all help</p>
