Width and height not changing when setting img src property

Question

Using Javascript to change an 's src... First time the width and height properties are being set correctly. The Second time they don't change. Why?

So I've got this blank image on my page... <img id="imgCropImage" />

So the idea is that every time a user uploads an image, the uploader's UploadComplete callback will set this image's src to the image that has just been uploaded so that it can be cropped. I then use this image's height and width properties in order to create a blown up crop preview.

It works great the first time. The browser or the DOM or something automagically set the img's height and width attributes which I access via the DOM after the image has loaded. It's beautiful.

If the user uploaded the wrong image, I want to allow them to upload a different one. This time however, the img's width and height attributes, accessed via javascript, remain the same as the prior image. The new image displays correctly in it's own width and height, it's just that the tag's properties do not change along with a new src.

Does anyone know why this happens? Or even better, how I could deterministically get the img's height and width upon loading a new src?

I <3 stackoverflow and I <3 you.

Answer 1

What about "removing" the height and width attributes.

$('#imgCropImage').removeAttr('height');
$('#imgCropImage').removeAttr('width');

That should "Reset" it. (If you're using JQuery that is).

Answer 2

Did you try to replace the previous image by a new one, with the new src?

   var newImg = document.createElement('IMG');
   newImg.src = newSrc;
   oldImg.parentNode.replaceChild(newImg, oldImg);