Home/ Questions/Q 61333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T18:18:10+00:00

I have an img tag in my webapp that uses the onload handler to

  • 0

I have an img tag in my webapp that uses the onload handler to resize the image:

<img onLoad='SizeImage(this);' src='foo' >

This works fine in Firefox 3, but fails in IE7 because the image object being passed to the SizeImage() function has a width and height of 0 for some reason — maybe IE calls the function before it finishes loading?. In researching this, I have discovered that other people have had this same problem with IE. I have also discovered that this isn’t valid HTML 4. This is our doctype, so I don’t know if it’s valid or not:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

Is there a reasonable solution for resizing an image as it is loaded, preferably one that is standards-compliant? The image is being used for the user to upload a photo of themselves, which can be nearly any size, and we want to display it at a maximum of 150×150. If your solution is to resize the image server-side on upload, I know that is the correct solution, but I am forbidden from implementing it 🙁 It must be done client side, and it must be done on display.

Thanks.

Edit: Due to the structure of our app, it is impractical (bordering on impossible) to run this script in the document’s onload. I can only reasonably edit the image tag and the code near it (for instance I could add a <script> right below it). Also, we already have Prototype and EXT JS libraries… management would prefer to not have to add another (some answers have suggested jQuery). If this can be solved using those frameworks, that would be great.

Edit 2: Unfortunately, we must support Firefox 3, IE 6 and IE 7. It is desirable to support all Webkit-based browsers as well, but as our site doesn’t currently support them, we can tolerate solutions that only work in the Big 3.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. IE7 is trying to resize the image before the DOM tree is fully rendered. You need to run it on document.onload… you’ll just need to make sure your function can handle being passed a reference to the element that isn’t ‘this.’

    Alternatively… and I hope this isn’t a flameable offense… jQuery makes stuff like this really, really easy.

    EDIT in response to EDIT 1:

    You can put document.onload(runFunction); in any script tag, anywhere in the body. it will still wait until the document is loaded to run the function.

    • 0