chrome下img加载对height()的影响示例探讨


Posted in Javascript onMay 26, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>chrome下img加载对height()的影响</title> 
<style type="text/css"> 
.floatleft { 
float:left; 
} 
</style> 
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script> 
<script type="text/javascript"> 
$(function() { 
var img_h = $('.showimg').height(); 
var img_w = $('.showimg').width(); 
var text_h = $('.showtext').height(); 
$('.showresult').html('showImg:' + img_w + '&' + img_h + '<br />showText:' + text_h); 
alert('showImg:' + img_w + '&' + img_h + '<br />showText:' + text_h); 
}); 
</script> 
</head> 
<!-- 
作者:北京-南宫 
日期:2012-07-25 
--> 
<body> 
<div class="floatleft"> 
<div class="showimg"> 
<img src="images/flash_pic.gif" /> 
</div> 
<div class="showtext"> 
这是文字 
</div> 
<div class="showresult"> 
这里显示结果。 
</div> 
</div> 
</body> 
</html>

将此代码在chrome运行,当alert窗口弹出时,将会发现页面的img并没有加载。

运行结果如下:

这是文字
showImg:112&0
showText:18

1、此处 img的默认宽度为112,但是我链接的img的宽度为1000,

2、此处img的高度为0,

现做如下改动

<img src="images/flash_pic.gif" width="1000" />

运行结果为:

这是文字
showImg:1000&0
showText:18
img的高度仍旧为0

当为其设置高度之后,就可以正常获取到。

结论:在chrome下,img不设置宽高,通过jquery的width()和height()获取到的img的宽高将为112px * 0

求助:希望哪位大侠有好办法,能在不设置宽高情况下获取到正确的值。

Javascript 相关文章推荐
JS面向对象编程浅析
Aug 28 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 #Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 #Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 #Javascript
jquery attr方法获取input的checked属性问题
May 26 #Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 #Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 #Javascript
js处理表格对table进行修饰
May 26 #Javascript
You might like
3
2006/10/09 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
使用python Django做网页
2013/11/04 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python入门篇之函数
2014/10/20 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python实现类之间的方法互相调用
2018/04/29 Python
利用Python如何生成便签图片详解
2018/07/09 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python列表返回重复数据的下标
2020/02/10 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
演讲主持词
2014/03/18 职场文书
投资合作协议书范本
2014/04/17 职场文书
机械专业求职信
2014/05/25 职场文书
身边的榜样活动方案
2014/08/20 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
党校学习个人总结
2015/02/15 职场文书
工伤调解协议书
2016/03/21 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript