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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
js子页面获取父页面数据示例
May 15 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
ExtJS 入门
2010/10/29 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Vue组件化开发思考
2018/02/02 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python实现杨辉三角思路
2017/07/14 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
运动会广播稿100字
2014/01/11 职场文书
优秀班组长事迹
2014/05/31 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
稽核岗位职责
2015/02/10 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
你会写请假条吗?
2019/06/26 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
Django使用redis配置缓存的方法
2021/06/01 Redis
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技