关于用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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
详解vue-router传参的两种方式
Sep 10 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中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
心扬JS分页函数代码
2010/09/10 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
python重要函数eval多种用法解析
2020/01/14 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
python中pyplot基础图标函数整理
2020/11/10 Python
Ajax主要包含了哪些技术
2014/06/12 面试题
大学毕业自我鉴定范文
2014/02/03 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
师德师风的心得体会
2014/09/02 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
天坛导游词
2015/02/02 职场文书
班主任高考寄语
2015/02/26 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python