关于用Jquery的height()、width()计算动态插入的IMG标签

171 阅读 0 评论 113 点赞

我是靠谱客的博主闪闪过客，最近开发中收集的这篇文章主要介绍关于用Jquery的height()、width()计算动态插入的IMG标签，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先来看现象：

复制代码代码如下:

 
<div id="cc"></div> 
<script> 
$(document).ready(function() { 
$("#cc").append("<div id='aa' style='width:200px;height:200px;' /></div>"); 
alert($("#aa").width()); 
}); 
</script> 

结果为：200
所有浏览器都得到正确的结果

把插入的元素改为IMG

复制代码代码如下:

 
<div id="cc"></div> 
<script> 
$(document).ready(function() { 
$("#cc").append("<img id='aa' src='http://www.uoften.com/images/logo.gif' />"); 
alert($("#aa").width()); 
}); 
</script> 

（注：image1.jpg的实际宽为693）

结果为：
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0

再F5刷新一下，结果为：
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari和Chrome始终为0。

应该可以理解为在图片没有加载或呈现完成时计算出的图片宽高也是不正确的，刷新后应该是有了缓存，所以结果就正确了，但为什么Chrome

和Safari始终都为0呢？而且IE和OPERA居然一开始还会计算出一个错误值出来的。
改成下面这样就都好了：

复制代码代码如下:

 
<div id="cc"></div> 
<script> 
$(document).ready(function() { 
$("#cc").append("<img id='aa' src='http://www.uoften.com/images/logo.gif' />"); 
window.setTimeout(function(){alert($("#aa").width()); },100); 
}); 
</script> 

有解决过此问题或有关于此问题更详细的认识的大鸟还望不吝赐教..

复制代码代码如下:

 
$(document).ready(function() { 
$("#cc").append("<img id='aa' />"); 
$("#aa").load(function(){ 
alert($("#aa").width() 
}).attr("src", "http://www.uoften.com/images/logo.gif"); 
}); 