关于用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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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实现通过ftp上传文件
2015/06/19 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
详解Python中的测试工具
2019/06/09 Python
基于python3的socket聊天编程
2020/02/17 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
大学自主招生推荐信
2014/05/10 职场文书
护理专业自荐书
2014/06/04 职场文书
物流管理专业自荐信
2014/06/23 职场文书
就业协议书
2014/09/12 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
见义勇为事迹材料
2014/12/24 职场文书
教师节校长致辞
2015/07/31 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Nginx快速入门教程
2021/03/31 Servers
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
HTML基础详解(下)
2021/10/16 HTML / CSS
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python