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 相关文章推荐
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
javascript实现拖放效果
Dec 16 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
聊聊JS ES6中的解构
Apr 29 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
php中大括号作用介绍
2012/03/22 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php实现mysql封装类示例
2014/05/07 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
浅析Python中的多重继承
2015/04/28 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
大学校园活动策划书
2014/02/04 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
给校长的建议书600字
2014/05/15 职场文书
贷款委托书怎么写
2014/08/02 职场文书
金秋助学感谢信
2015/01/21 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
浅谈Python数学建模之线性规划
2021/06/23 Python
防止web项目中的SQL注入
2021/12/06 MySQL
POST提交数据常见的四种方式
2022/01/18 HTML / CSS