这篇文章主要介绍了chrome下img加载对height()的影响,需要的朋友可以参考下
 
<!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

求助:希望哪位大侠有好办法,能在不设置宽高情况下获取到正确的值。
最新资讯
媒体会挤满滴滴高管 顺风车依旧无上线时间表

媒体会挤满滴滴高管

但即使做了这么多有关安全的调整,包括柳青在内的滴滴高
小鹏汽车连发补救措施挽人心

小鹏汽车连发补救措施

小鹏汽车正在制定新的补偿方案,包括三年6折保值换购或
亚马逊败走 图书电商巨头四进三

亚马逊败走 图书电商

用户增长的红利正逐渐消失。为了能够稳定自身的业务规
滴滴取消顺风车附近接单

滴滴取消顺风车附近接

未来将在白天试运行顺风车,并在试运行期间免收车主信息
北京ETC卡不必担心被盗刷

北京ETC卡不必担心被

北京地区近几年发行的ETC速通卡并不具有金融功能,只能
欧盟批准220亿美元收购 沃达丰成欧洲最大综合运营商

欧盟批准220亿美元收

去年5月,沃达丰宣布将收购Liberty Global的德国和中欧
最新文章
Javascript读写cookie的实例源码

Javascript读写cookie

今天小编就为大家分享一篇关于Javascript读写cookie的
微信小程序登录session的使用

微信小程序登录sessio

这篇文章主要介绍了微信小程序登录session的使用,小编
JavaScript中this用法学习笔记

JavaScript中this用法

在本篇文章里小编给大家分享了关于JavaScript中this用
nodejs微信开发之授权登录+获取用户信息

nodejs微信开发之授权

这篇文章主要介绍了nodejs微信开发之授权登录+获取用
nodejs微信开发之自动回复的实现

nodejs微信开发之自动

这篇文章主要介绍了nodejs微信开发之自动回复的实现,文
node微信开发之获取access_token+自定义菜单

node微信开发之获取ac

这篇文章主要介绍了node微信开发之获取access_token+