复制代码代码如下:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Chrome 下 img 加载对ความสูง () 的影响 </title>
<style type = "text/css">
.floatleft {
ลอย: ซ้าย;
-
</style>
<script type = "text/javascript" src = "js/jQuery-1.7.1.js"> </script>
<script type = "text/javascript">
$ (function () {
var img_h = $ ('. showimg'). ความสูง ();
var img_w = $ ('. showimg'). width ();
var text_h = $ ('. showtext'). ความสูง ();
$ ('. showresult'). html ('showimg:' + img_w + '&' + img_h + '<br /> showtext:' + text_h);
การแจ้งเตือน ('showimg:' + img_w + '&' + img_h + '<br /> showtext:' + text_h);
-
</script>
</head>
-
作者： 北京-南宫
日期： 2012-07-25
-
<body>
<div>
<div>
<img src = "images /flash_pic.gif" />
</div>
<div>
这是文字
</div>
<div>
这里显示结果。
</div>
</div>
</body>
</html>
将此代码在 Chrome 运行， 当 Alert 窗口弹出时， 将会发现页面的 img 并没有加载。
运行结果如下：
这是文字
showimg: 112 & 0
Showtext: 18
1 、此处 img 的默认宽度为 112， 但是我链接的 img 的宽度为 1,000
2 、此处 img 的高度为 0
现做如下改动
复制代码代码如下:
<img src = "images /flash_pic.gif" />
运行结果为：
这是文字
showimg: 1000 & 0
Showtext: 18
img 的高度仍旧为 0
当为其设置高度之后， 就可以正常获取到。
结论： 在 chrome 下， img 不设置宽高， 通过 jQuery 的ความกว้าง () 和ความสูง () 获取到的 img 的宽高将为 112px * 0
求助： 希望哪位大侠有好办法， 能在不设置宽高情况下获取到正确的值。