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 相关文章推荐
浅谈jquery回调函数callback的使用
Jan 30 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
详解vue axios二次封装
Jul 22 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
Echarts动态加载多条折线图的实现代码
May 24 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
php如何获取Http请求
2020/04/30 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python字典序问题实例
2014/09/26 Python
python常规方法实现数组的全排列
2015/03/17 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
职工运动会感言
2014/02/07 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
吨的认识教学反思
2014/04/27 职场文书
低碳环保标语
2014/06/12 职场文书
法人授权委托书
2014/09/16 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
论文答谢词
2015/01/20 职场文书
离婚协议书范文2015
2015/01/26 职场文书
环保宣传语大全
2015/07/13 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL