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学习笔记(十) js对象 继承
Jun 19 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
检查php文件中是否含有bom的函数
2012/05/31 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
Js动态创建div
2008/09/25 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
2014全国两会学习心得体会1000字
2014/03/10 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
圣诞晚会主持词
2015/07/01 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
Python如何让字典保持有序排列
2022/04/29 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL