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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
JS交换变量的方法
Jan 21 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
深入理解vue Render函数
Jul 19 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
Python+django实现文件下载
2016/01/17 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python读取与处理netcdf数据方式
2020/02/14 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
新郎新娘答谢词
2015/01/04 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Oracle11g R2 安装教程完整版
2021/06/04 Oracle