JS获取图片高度宽度的方法分享


Posted in Javascript onApril 17, 2015

一般获取图片高度宽度的写法:

var img = new Image();

img.src = imgsrc;

var imgWH = CalcImgTiple(img.width, img.height);

但chrome中测试 无法获取到。img.width, img.height都为0

原因:当图片不是本地图片,而是网络图片
onload 在成功地装载了图像时调用的事件处理程序。

在做web开发,其中有一个需求:利用Javascript获取要加载的图片的尺寸,所以很自然的,想到了img的onload方法,在firefox下开发完成后,到IE下调试,发现img的onload事件很多情况下都不被调用。

最初的代码如下:

var img = new Image;

img.src = "test.gif";

img.onload = function(){

alert ( img.width );

};

这段代码看着没什么问题,但是为什么onload没有被IE调用呢?因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢?我于是我测试了以下代码,成功了~

var img = new Image;

img.onload = function(){

alert ( img.width );     };

img.src = "test.gif";

把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让想到了Ajax,在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
JS替换字符串中空格方法
Apr 17 #Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 #Javascript
jQuery实现自定义事件的方法
Apr 17 #Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 #Javascript
js实现touch移动触屏滑动事件
Apr 17 #Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 #Javascript
JavaScript对象反射用法实例
Apr 17 #Javascript
You might like
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
使用js显示当前时间示例
2014/03/02 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python 同时读取多个文件的例子
2019/07/16 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python extract及contains方法代码实例
2020/09/11 Python
Python实现扫码工具的示例代码
2020/10/09 Python
详解pandas映射与数据转换
2021/01/22 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
广告业务员岗位职责
2014/02/06 职场文书
《散步》教学反思
2014/03/02 职场文书
职业女性的职业规划
2014/03/04 职场文书
分公司负责人任命书
2014/06/04 职场文书
新党员入党决心书
2015/09/22 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Redis keys命令的具体使用
2022/06/05 Redis