Javascript: Images loading too slowly

Question

I have an array of images that I create dialogs from.

I need to know the width of the image to make that the width of the dialog.

//Used to get dimensions of image
var image = new Image();

//Set Image
image.src = ImageArray[currentImageVal + direction].src;

//Get direction to move photos
switch (direction) {
    case 1:
        //Set current val
        currentImageVal = currentImageVal + 1;
        break;
    case -1:
        //Set current val
        currentImageVal = currentImageVal - 1;
        break;
}

//Set image
$('DialogImagesBig').attr('src', ImageArray[currentImageVal].src);
//Set new current image
CurrentDialogImage = ImageArray[currentImageVal].src;

console.log(image.src);
console.log(image.width);

//Check if it is less than 450
if (image.width < 450) {
    //Adjust css
    $('.ui-dialog').css('width', image.width + 50);
    //Edit dialog position
    $('.ImageDialogDiv').dialog("option", "position", 'center');
} else {
    //Normal width
    $('.ui-dialog').css('width', '500');
    //Edit dialog position
    $('.ImageDialogDiv').dialog("option", "position", 'center');
}

The problem is that more times then not the image will not load up in time (the console.log(image.width) will equal 0 but console.log(image.src) will be correct).

Is there a way for me to pause the rest of the script until the image is loaded (everything after image.src )?

Answer 1

You can attach rest of the code in img.onload function. This will get called when the image gets loaded.

Make sure you set the image.src after this function declaration.

image.onload = function () {
    if (image.width < 450) {
        //Adjust css
        $('.ui-dialog').css('width', image.width + 50);
        //Edit dialog position
        $('.ImageDialogDiv').dialog("option", "position", 'center');
    } else {
        //Normal width
        $('.ui-dialog').css('width', '500');
        //Edit dialog position
        $('.ImageDialogDiv').dialog("option", "position", 'center');
    }
}

image.src = ImageArray[currentImageVal + direction].src;

Answer 2

Using onload event may be problematic with ie, in some circumstances - see comments here: http://msdn.microsoft.com/en-us/library/cc197055(v=vs.85).aspx -- even if the image is created in code, if it's already cached, it may not fire. This may only apply to IE6-7.

So in addition to doing this, you should check first to see if it's finished loading before binding the event using the naturalWidth and complete (for old IE) properties. naturalWidth (and height) will be undefined until the image has loaded.

I can conceive of a race condition if you check first to see if it's loaded, then if not, bind the "onload" event, but between these two actions, the image finishes loading. I am not sure if this is possible given JS's single-threaded nature, but since images are loaded asynchronously, perhaps it is.

In a project where I had a similar problem, I would just check for whether the image was loaded or not, and if not, set a timeout to call the function again, so it would keep trying until it was loaded. This would avoid any possible race condition.