Heim >Web-Frontend >js-Tutorial >关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

WBOY
WBOYOriginal
2016-05-16 18:14:141622Durchsuche

先来看现象:

复制代码 代码如下:


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


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

把插入的元素改为IMG
复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery" >"); <BR>alert($("#aa").width()); <BR>}); <BR></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居然一开始还会计算出一个错误值出来的。
改成下面这样就都好了:
复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery" >"); <BR>window.setTimeout(function(){alert($("#aa").width()); },100); <BR>}); <BR></script>

有解决过此问题或有关于此问题更详细的认识的大鸟还望不吝赐教..
复制代码 代码如下:

$(document).ready(function() {
$("#cc").append("关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery");
$("#aa").load(function(){
alert($("#aa").width()
}).attr("src", "http://www.jb51.net/images/logo.gif");
});
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn