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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
vue微信分享插件使用方法详解
Feb 18 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
服务器web工具 php环境下
2010/12/29 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
PyQt5实现登录页面
2020/05/30 Python
python字典的值可以修改吗
2020/06/29 Python
个人应聘自我评价分享
2013/11/18 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
环保倡议书50字
2014/05/15 职场文书
严以律己学习心得体会
2016/01/13 职场文书
浅析Python中的套接字编程
2021/06/22 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python