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


Posted in Javascript onDecember 08, 2010

先来看现象:

<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='https://3water.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='https://3water.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", "https://3water.com/images/logo.gif"); 
});
Javascript 相关文章推荐
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
AngularJS与后端php的数据交互方法
Aug 13 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
写js时遇到的一些小问题
Dec 06 #Javascript
javascript定义函数的方法
Dec 06 #Javascript
javascript中的一些注意事项 更新中
Dec 06 #Javascript
JavaScript Accessor实现说明
Dec 06 #Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 #Javascript
javascript处理table表格的代码
Dec 06 #Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 #Javascript
You might like
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
文员岗位职责
2013/11/09 职场文书
摄影助理岗位职责
2014/02/07 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
物理教育专业求职信
2014/06/25 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
受资助学生感谢信
2015/01/21 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015年工商所工作总结
2015/05/21 职场文书
关于幸福的感言
2015/08/03 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
各国货币符号大全
2022/02/17 杂记
java实现web实时消息推送的七种方案
2022/07/23 Java/Android