Question

I’m trying to set up a resize function to my images’ onloads so that if the image is larger than the user’s browser window, it resizes itself. When I put a function like:

function resize(){
    console.log(this.width);
}

It says 0 or NaN or undefined. If I run the function on the images later, I get the correct results… How can I set an onload that will be able to access the height and width attributes?

edit: Sorry for the confusion: http://jsfiddle.net/9aDFe/

The images are the ones found on google under the search “landscape”

Answer 1

A cross browser solution is to use a combination of readystatechange and load

var image = new Image();
image.addEventListener ("readystatechange", yourImageOnloadChecker);
image.addEventListener ("load", yourImageOnloadChecker);
image.src = "path/to/your/image"; // set SRC after your events. it's an IE fix

Your image onload checker function should check for isNaN or equal to 0 on the height/width and if so, set up a callback to itself with setTimeout.