chrome下img加载对height()的影响示例探讨

前端技术 2023/09/01 JavaScript
复制代码 代码如下:

<!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加载对height()的影响</title>
<style type=\"text/css\">
.floatleft {
float:left;
}
</style>
<script type=\"text/javascript\" src=\"js/jQuery-1.7.1.js\"></script>
<script type=\"text/javascript\">
$(function() {
var img_h = $(\'.showimg\').height();
var img_w = $(\'.showimg\').width();
var text_h = $(\'.showtext\').height();
$(\'.showresult\').html(\'showImg:\' + img_w + \'&\' + img_h + \'<br />showText:\' + text_h);
alert(\'showImg:\' + img_w + \'&\' + img_h + \'<br />showText:\' + text_h);
});
</script>
</head>
<!--
作者：北京-南宫
日期：2012-07-25
-->
<body>
<div class=\"floatleft\">
<div class=\"showimg\">
<img src=\"images/flash_pic.gif\" />
</div>
<div class=\"showtext\">
这是文字
</div>
<div class=\"showresult\">
这里显示结果。
</div>
</div>
</body>
</html>

将此代码在chrome运行，当alert窗口弹出时，将会发现页面的img并没有加载。

运行结果如下：

这是文字
showImg:112&0
showText:18

1、此处 img的默认宽度为112，但是我链接的img的宽度为1000,

2、此处img的高度为0,

现做如下改动
复制代码 代码如下:

<img src=\"images/flash_pic.gif\" width=\"1000\" />

运行结果为：

这是文字
showImg:1000&0
showText:18
img的高度仍旧为0

当为其设置高度之后，就可以正常获取到。

结论：在chrome下，img不设置宽高，通过jquery的width()和height()获取到的img的宽高将为112px * 0

求助：希望哪位大侠有好办法，能在不设置宽高情况下获取到正确的值。

本文地址：https://www.stayed.cn/item/1286

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案