img onload não funciona bem no IE7
Eu tenho uma tag img no meu webapp que usa o manipulador onload para redimensionar a imagem:
<img onLoad="SizeImage(this);" src="foo" >
Isso funciona bem no Firefox 3, mas falha no IE7 porque o objeto de imagem sendo passado para oSizeImage() A função tem uma largura e uma altura de 0 por algum motivo - talvez o IE chame a função antes de terminar o carregamento ?. Ao pesquisar isso, descobri que outras pessoas tiveram esse mesmo problema com o IE. Eu também descobri que isso não é válido HTML 4. Este é o nosso doctype, então eu não sei se é válido ou não:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Existe uma solução razoável para redimensionar uma imagem à medida que ela é carregada, de preferência uma que seja compatível com os padrões? A imagem está sendo usada para o usuário fazer o upload de uma foto de si mesmo, que pode ter praticamente qualquer tamanho, e queremos exibi-la em no máximo 150x150. Se a sua solução é redimensionar a imagem do lado do servidor no upload, eu sei que é a solução correta, mas estou proibido de implementá-lo :( Deve ser feito do lado do cliente, e isso deve ser feito em exibição.
Obrigado.
Editar: Devido à estrutura do nosso aplicativo, é impraticável (quase impossível) executar esse script no onload do documento. Eu só posso razoavelmente editar a tag de imagem e o código perto dela (por exemplo, eu poderia adicionar um<script> logo abaixo dela). Além disso, já temos bibliotecas Prototype e EXT JS ... o gerenciamento preferiria não ter que adicionar outro (algumas respostas sugeriram jQuery). Se isso puder ser resolvido usando essas estruturas, isso seria ótimo.
Editar 2: Infelizmente, precisamos dar suporte ao Firefox 3, IE 6 e IE 7. É desejável suportar também todos os navegadores baseados em Webkit, mas como nosso site atualmente não os suporta, podemos tolerar soluções que só funcionam no Big 3. .