chrome下jq width()方法取值为0的解决方法


Posted in Javascript onMay 26, 2014

http://photo.163.com/shixiaojian089/train/28002 这是网易的一个相册,看到后想试着做做看。

在我的制作方法中,需要获取到每张照片的宽度,所以很自然就使用了jq的width()方法。在ff跟ie下运行问题不大,但是到了chrome上,就出现问题了。

使用alert排查,发现chrome下width方法取到的值都是0.这样子的话,想来就是脚本运行到这的时候图片根本没加载好。问题应该出在$(function(){});上,因为这个方法只要求加载完dom就开始运行。那么改成在onload下执行,果然这下可以了。不过这明显不是很好的办法,毕竟在onload下运行要等到整个文件全部内容全部加载好后再运行脚本。

网上搜索一下后,发现这哥么https://3water.com/article/50402.htm也遇到了同样的问题,在其的评论下方有一种解决方案,可以参考:

在要获取图片宽高的地方用

$img.load(function(){ 
var img_h = $img.height(); 
var img_w = $img.width(); 
}

这样可以仍旧使用$(function(){});在需要图片加载的地方对图片对象调用load方法,避免等待整个文件内容加载完毕。
Javascript 相关文章推荐
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
JavaScript实现轮播图特效
Apr 10 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
利用jQuery实现可以编辑的表格
May 26 #Javascript
You might like
Session保存到数据库的php类分享
2011/10/24 PHP
PHP时间函数使用详解
2019/03/21 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
javascript dom追加内容实现示例
2013/09/21 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
华为c/c++笔试题
2016/01/25 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年派出所工作总结
2015/04/24 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书