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 UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
学习javascript文件加载优化
Feb 19 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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 allow_url_include的应用和解释
2010/04/22 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
javascript事件问题
2009/09/05 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
简单实现python数独游戏
2018/03/30 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Django REST framework视图的用法
2019/01/16 Python
kali中python版本的切换方法
2019/07/11 Python
wxPython色环电阻计算器
2019/11/18 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
工商企业管理应届生求职信
2013/11/03 职场文书
毕业设计计划书
2014/01/09 职场文书
寒假思想汇报
2014/01/10 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2016中秋节问候语
2015/11/11 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书