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

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)的更多相关文章

  1. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  2. js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】

    我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...

  3. js实现ctrl+v粘贴上传图片(兼容chrome,firefox,ie11)

    背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...

  4. js和jQuery 获取屏幕高度、宽度

    js获取屏幕高度,宽带 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body ...

  5. js获取图片高度

    js获取图片高度时经常会获取的图片高度为0,原因是图片未加载完毕.第一次加载时,显示0(火狐等部分浏览器显示24).待加载完毕后,再刷新,显示图片高度258. var oImg = document. ...

  6. 加入收藏夹的js代码(求兼容chrome浏览器的代码)

    从网上找了加入收藏夹的js代码,但不兼容chrome,不知道有没有兼容chrome的相关代码,希望有知道的告诉一下,谢谢! 代码如下 $("#id").click(function ...

  7. 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  8. [转]JS中对象与字符串的互相转换

    原文地址:http://www.cnblogs.com/luminji/p/3617160.html 在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: thr ...

  9. JS中对象与字符串的互相转换

    在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON ...

随机推荐

  1. Qt WebRTC demo

    This is a very simple demonstration of how to stream from a native application to the browser using ...

  2. keytool生成JKS证书的详细步骤及截图

    注:防止有不必要的空格,尽量不要复制粘贴 1. 依据CFCA所提供的CN生成密钥存储文件和密钥对(创建JKS证书库) keytool -genkey -v -alias slserver -keyal ...

  3. Vue.js:条件与循环

    ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...

  4. PHP中的逻辑判断函数empty() isset() is_null() ==NULL ===NULL

    1.empty() header("Content-type: text/html; charset=utf-8"); if(!empty($data)){ //empty() 未 ...

  5. 小程序mina框架与配置

    小程序是采用MINA框架 <!--demo.wxml--> <view> Hello {{name}}</view> <button bindtap=&quo ...

  6. Hadoop入门介绍一

    Hadoop1.是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.2.Hadoop实现了一个分布式文件 ...

  7. Informatica PowerCenter下载地址

    https://edelivery.oracle.com/EPD/Download/get_form?egroup_aru_number=12854075

  8. sql中left join on where区别剖析

    select from tb1 left join tb2 on tb1.xx=tb2.xx and tb2.xxxx=5 先筛选tb2.xxxx=5 再把tb1与筛选后的临时表进行左连接. sele ...

  9. jquery-uploadify传参方法

    jquery-uploadify传参方法$(document).ready(function () { $("#uploadify").uploadify({ 'uploader' ...

  10. leetcode888

    class Solution { public: int Binary_Search(vector<int> x, int N, int keyword) { , high = N - , ...