img onload在IE7中不能很好地工作

Question

img onload在IE7中不能很好地工作

rme*_*dor 14 html javascript internet-explorer image

我的webapp中有一个img标记,它使用onload处理程序来调整图像大小:

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

Run Code Online (Sandbox Code Playgroud)

这在Firefox 3中工作正常,但在IE7中失败,因为传递给SizeImage()函数的图像对象由于某种原因的宽度和高度为0 - 也许IE在完成加载之前调用该函数？在研究这个问题时,我发现其他人对IE也存在同样的问题.我还发现这不是有效的HTML 4.这是我们的doctype,所以我不知道它是否有效:

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

Run Code Online (Sandbox Code Playgroud)

在加载图像时是否有合理的解决方案来调整图像大小,最好是符合标准的图像？该图像用于用户上传自己的照片,几乎可以是任何尺寸,我们希望以最大150x150的速度显示它.如果您的解决方案是在上传时调整图像服务器端的大小,我知道这是正确的解决方案,但我禁止实现它:(必须在客户端完成,并且必须在显示时完成.

谢谢.

编辑:由于我们的应用程序的结构,在文档的onload中运行此脚本是不切实际的(接近不可能).我只能合理地编辑图像标签及其附近的代码(例如我可以<script>在它下方添加一个右侧).此外,我们已经拥有Prototype和EXT JS库......管理层更愿意不必添加另一个(一些答案提示jQuery).如果可以使用这些框架解决这个问题,那就太棒了.

编辑2:不幸的是,我们必须支持Firefox 3,IE 6和IE 7.我们也希望支持所有基于Webkit的浏览器,但由于我们的网站目前不支持它们,我们可以容忍只能在大3.

Answer 1

eye*_*ess 7

如果您不必支持IE 6,则可以使用此CSS.

yourImageSelector {
    max-width: 150px;
    max-height: 150px;
}

Run Code Online (Sandbox Code Playgroud)

以下是如何支持IE6:<! - [if lt IE 7]> <style> yourImageSelector {width:expression(this.width> 150？150:true); height:表达式(this.height> 150？150:true); } </ style> <![endif] - > (4认同)

Answer 2

Ste*_*ulo 6

IE7正在尝试在完全呈现DOM树之前调整图像大小.你需要在document.onload上运行它...你只需要确保你的函数可以处理传递对不是"this"的元素的引用.

或者......我希望这不是一个可以冒险的进攻...... jQuery让这样的东西变得非常简单.

编辑以回应编辑1:

您可以document.onload(runFunction);在身体的任何位置放入任何脚本标记.它仍将等到文档加载后才能运行该函数.

归档时间：	17 年，2 月前
查看次数：	29773 次
最近记录：	13 年，6 月前