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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
两个数组去重的JS代码
Dec 04 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
瀑布流布局代码一例
Apr 11 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
OpenLayers3加载常用控件使用方法详解
Sep 25 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
mysql5详细安装教程
2007/01/15 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
js 作用域和变量详解
2017/02/16 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
分析python请求数据
2018/08/19 Python
python 连续不等式语法糖实例
2020/04/15 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
车间机修工岗位职责
2014/02/28 职场文书
设备管理实施方案
2014/05/31 职场文书
中文专业自荐书
2014/06/29 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
毕业实习感受与体会
2015/05/26 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android