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实现控制经纬度显示地图与卫星
May 20 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
详解JS中的attribute属性
Apr 25 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
原生js实现轮播图特效
May 04 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
详解supervisor使用教程
2017/11/21 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python2.7的flask框架之引用js&css等静态文件的实现方法
2019/08/22 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python中adb有什么功能
2020/06/07 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
2014道德模范事迹材料
2014/02/16 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
社团活动总结模板
2014/06/30 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers