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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python版百度语音识别功能
2019/07/09 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
为什么group by 和order by会使查询变慢
2014/05/16 面试题
音乐教学随笔感言
2014/02/19 职场文书
技术总监管理职责范本
2014/03/06 职场文书
2014年副班长工作总结
2014/12/10 职场文书
支教个人总结
2015/03/04 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
把77A收信机改造成收音机
2022/04/05 无线电
Redis入门基础常用操作命令整理
2022/06/01 Redis