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 相关文章推荐
深入理解Javascript闭包 新手版
Dec 28 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
js图片处理示例代码
May 12 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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
php 中的str_replace 函数总结
2007/04/27 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
js实现放大镜特效
2017/05/18 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python字典操作简明总结
2015/04/13 Python
利用Python破解验证码实例详解
2016/12/08 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
应届生服务员求职信
2013/10/31 职场文书
在校生自我鉴定
2014/01/23 职场文书
清洁工岗位职责
2014/01/29 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
监考失职检讨书
2015/01/26 职场文书
歌咏比赛口号大全
2015/12/25 职场文书