I have an img element in my DOM. Based upon user action, I compute a URL for an image, and change the image element's src attribute (using jQuery). The new image has a different size than the old image. This works fine on Safari, but IE does not resize the display for the new image's size. I do have a .load handler on the src change (in which I make some changes to the img element's class)... if I knew how to access the image's actual size, I could set the img elements height and width properties. Are those values accessible somewhere somehow? If not, is there some other way to have the image displayed at its new size?
A:
I would investigate other solutions, but you can indeed access that information directly
var myImage = new Image();
myImage.src = $("image selector goes here").attr('src');
myImage.onload = function() {
alert(myImage.width + "," + myImage.height);
}
Jamie Wong
2010-07-26 19:02:09
@Jamie Thanks for the suggestion, but alas when I *change* the image's src and load an image of a new size, the img element still reports the initial width and height values, not the newly loaded image (on IE, that is; as I said, the image is resized by Safari).
Zhami
2010-07-26 19:27:11
Try loading the image by url directly as opposed to the `attr('src')` method then. So something like `myImage.src = "http://example.com/awesome.gif"` then check the width. I can't see how that would possibly report the same width, since it should be unaware of it. This is kind of pain since it sends two requests to your server for the image, but shouldn't be an issue if there's caching.
Jamie Wong
2010-07-26 19:34:47
My suspicion is that the rendering engine does layout with the first image. The subsequent image loads do not force relayout. I have rewritten my entire approach to avoid this issue.
Zhami
2010-07-27 01:38:44
Post your solution in case others are having the same problem, then accept the answer.
Jamie Wong
2010-07-27 05:14:01