IE6 javascript image swapping

Question

I am having a problem with IE6 image swapping using jQuery (but assumedly any old javascript will trigger this issue)

When setting $().attr('src','image.png') where the current image for the selector is drastically different in dimensions to the image.png image, IE6 squeezes the new image into the frame of the old image without resizing at all.

I've tried a few ways around this such as replaceWith on the image with a new image element triggered by an onload event when loading the new image, but nothing seems to be reliable at all, various results have been the image crammed into a very small box, or the new image simply not loading at all.

Any assistance much appreciated.

Answer 1

Maybe you have to trigger a reflow. Try adding and immediately removing a DIV after the new image has loaded. There must be some better method to trigger a reflow, though. I'll look into it.

---

Of course I'm assuming you didn't set the image size explicitly with CSS? Because if the img has style="width: 200px; height: 200px;" it will remain a 200px square even if you load a full size render of the Empire State Building into it.

---

About other ways of triggering a reflow, look here. Let me know if I guessed right.