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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
js跳转页面方法总结
Jan 29 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
搭建vue开发环境
Jul 19 Javascript
详解关于element级联选择器数据回显问题
Feb 20 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
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python做文本按行去重的实现方法
2016/10/19 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
python入门之井字棋小游戏
2020/03/05 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Python字典实现伪切片功能
2020/10/28 Python
利用python绘制正态分布曲线
2021/01/04 Python
建筑人员岗位职责
2013/12/25 职场文书
个人贷款承诺书
2014/03/28 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python