JS Img对象获取图片高度宽度(兼容Chrome)
一般获取图片高度宽度的写法:
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数据的,道理是一样的
JS Img对象获取图片高度宽度(兼容Chrome)的更多相关文章
- js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置
<script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...
- js实现ctrl+v粘贴上传图片(兼容chrome,firefox,ie11)
背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...
- js和jQuery 获取屏幕高度、宽度
js获取屏幕高度,宽带 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body ...
- js获取图片高度
js获取图片高度时经常会获取的图片高度为0,原因是图片未加载完毕.第一次加载时,显示0(火狐等部分浏览器显示24).待加载完毕后,再刷新,显示图片高度258. var oImg = document. ...
- 加入收藏夹的js代码(求兼容chrome浏览器的代码)
从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...
- 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6
阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...
- [转]JS中对象与字符串的互相转换
原文地址:http://www.cnblogs.com/luminji/p/3617160.html 在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: thr ...
- JS中对象与字符串的互相转换
在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON ...
随机推荐
- 找回mysql root用户的密码
1.停掉mysql服务ps -ef | grep mysqldkill -9 mysql进程的pid2.vi /etc/my.cnf找到[mysqld]在下面添加一行skip-grant-tables ...
- 使用Spring和Tomcat发布CXF SOAP WebService
上一节中使用代理工厂JaxWsProxyFactoryBean来发布WebService, 这种方式必须指定运行的端口,如果端口被占用,就会发布失败. cxf的WebService也可利用Tomcat ...
- 字节序(byte order)和位序(bit order)
字节序(byte order)和位序(bit order) 在网络编程中经常会提到网络字节序和主机序,也就是说当一个对象由多个字节组成的时候需要注意对象的多个字节在内存中的顺序. 以前我也基本只了 ...
- Redis官方文档》持久化
原文链接 译者:Alexandar Mahone 这篇文章从技术层面描述了Redis持久化,建议所有读者阅读.如果希望更多了解Redis持久化和持久性保障,建议阅读Redis持久化揭秘. Redis ...
- 2017中国大学生程序设计竞赛 - 女生专场 Happy Necklace(递推+矩阵快速幂)
Happy Necklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
- CentOS下安装桌面环境
1. 使用 yum grouplist 查看可用的 group 2. 使用 yum groupinstall 进行安装.例如:yum groupinstall GNOME Desktop
- cocos2d-x v3.3开发环境配置
开发环境: Win10 VS2012 链接:http://pan.baidu.com/s/1bn6S31d 密码:j2ol 配置Java SDK: 新建:JAVA_HOME =G:\Java\jdk1 ...
- Element-UI使用基本介绍
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI . 开发环境 1.安装webpack npm install -g webp ...
- imp导入数据的时候报错:ORA-01658: 无法为表空间 MAXDATA 中的段创建 INITIAL 区
在oracle里创建表,报出错: ORA-01658: 无法为表空间space中的段创建 INITIAL 区: 或者: ORA-01658: unable to create INITIAL exte ...
- C# 文件打印
Process pr = new Process(); pr.StartInfo.FileName = “C:\test.xls”; ...