首页 > web前端 > js教程 > 关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

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

WBOY
发布: 2016-05-16 18:14:14
原创
1583 人浏览过

先来看现象:

复制代码 代码如下:


<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");
});
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板