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)?

score 4 · Accepted Answer · answered Jun 29 '11 at 17:45

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;

score 1 · Answer 2 · answered Jun 29 '11 at 18:03

1

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.

answered Jun 29 '11 at 18:03

Jamie Treworgy

23,934
8
76
119

This is why you need to set the `src` property afterwards. – Mrchief Jun 29 '11 at 18:09
According to the comments from that page, in IE7 at least, it doesn't matter, it won't fire if it's been cached by the browser. – Jamie Treworgy Jun 29 '11 at 18:09
See this for a workaround for IE7: http://stackoverflow.com/questions/198892/img-onload-doesnt-work-well-in-ie7 – Mrchief Jun 29 '11 at 18:14
One of the answers is pretty much the same thing I was suggesting (test & use a timeout), is that what you mean? The accepted one is not relevant. – Jamie Treworgy Jun 29 '11 at 18:23
Yup! I was referring to the YUI one – Mrchief Jun 29 '11 at 18:26

Javascript: Images loading too slowly

2 Answers2

Linked