img onload在IE7中无法正常工作 [英] img onload doesn't work well in IE7
问题描述
我的webapp中有一个img标签，它使用onload处理程序来调整图像大小：
< img onLoad = SizeImage（本）; src =foo>
这在Firefox 3中正常工作，但在IE7中失败，因为图像对象被传递给 SizeImage（）函数的宽度和高度为0，出于某种原因 - 也许IE在加载完成之前调用函数？在研究这个时候，我发现其他人也遇到了与IE相同的问题。我也发现这不是有效的HTML 4。这是我们的文档类型，所以我不知道它是否有效：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
有没有合理的解决方法来调整图片的大小，因为它是加载的，最好是符合标准的图片？用户可以使用该图片上传自己的照片，该照片几乎可以是任意大小，我们希望以最高150x150的尺寸显示。如果您的解决方案是在上传时调整图像服务器端的大小，我知道这是正确的解决方案，但我禁止实施它:(必须在客户端完成，并且必须在显示器上完成。
谢谢。
编辑：由于我们的应用程序的结构，这是不切实际的不可能）在文档的onload中运行这个脚本，我只能合理地编辑图像标记和附近的代码（例如我可以添加一个< script> right我们已经有了Prototype和EXT JS库......管理层宁愿不必添加另一个（一些答案已经提出了jQuery），如果可以使用这些框架来解决这个问题，那就太棒了。编辑2 ：不幸的是，我们必须支持Firefox 3，IE 6和IE 7。最好还支持所有基于Webkit的浏览器，但是由于我们的网站目前不支持它们，我们可以容忍只能运作的解决方案在大三。
在DOM树完全呈现之前，IE7试图调整图像的大小。你需要在document.onload上运行它......你只需要确保你的函数可以处理被传入的元素不是this的引用。
或者......我希望这不是一个可以进行火焰攻击的进攻...... jQuery让这样的东西真的很容易。
编辑回应编辑1：
您可以在任何脚本标记中放入 document.onload（runFunction）; 。它仍然会等待文档加载后才能运行该功能。
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 150x150. 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.
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.
这篇关于img onload在IE7中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
