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

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

复制代码 代码如下:

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数据的,道理是一样的

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

时间: 2024-12-01 18:50:57

JS获取图片高度宽度的方法分享_javascript技巧的相关文章

js实现各种复制到剪贴板的方法(分享)_javascript技巧

一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

JS无缝滚动效果实现方法分析_javascript技巧

本文实例讲述了JS无缝滚动效果实现方法.分享给大家供大家参考,具体如下: 效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向左运动的效果 3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0.向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度).(拉的瞬间很快,用户察觉不到,造成一种无

原生JS简单实现ajax的方法示例_javascript技巧

本文实例讲述了原生JS简单实现ajax的方法.分享给大家供大家参考,具体如下: HTML部分: <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮,点击会触发click事件,click事件调用Ajax(

JS随机打乱数组的方法小结_javascript技巧

本文实例总结了JS随机打乱数组的方法.分享给大家供大家参考,具体如下: JS中,要打乱数组有很多方法,网上流传一个国外人写的方法,我认为是最精简的了: function randomsort(a, b) { return Math.random()>.5 ? -1 : 1; //用Math.random()函数生成0~1之间的随机数与0.5比较,返回-1或1 } var arr = [1, 2, 3, 4, 5]; arr.sort(randomsort); 这里介绍下sort()函数,在JS中

js预加载图片方法汇总_javascript技巧

本文实例汇总了js预加载图片方法.分享给大家供大家参考.具体分析如下: 1. 纯CSS: #preload-01 { background: url(yun_qi_img/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(yun_qi_img/image-02.png) no-repeat -9999px -9999px; } #preload-03 { background: url(yun_qi_

js焦点文字滚动效果代码分享_javascript技巧

本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下:效果描述:今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:-----------------

用js读写cookie的简单方法(推荐)_javascript技巧

在数据安全要求不是很高的情况下,我们可以直接用js对cookie进行读写,这样比较方便. 代码如下: /* 功能:保存cookies函数 参数:name,cookie名字:value,值 */ function SetCookie(name,value){ var Days = 30*12; //cookie 将被保存一年 var exp = new Date(); //获得当前时间 exp.setTime(exp.getTime() + Days*24*60*60*1000); //换成毫秒

js添加事件的通用方法推荐_javascript技巧

js添加事件的通用方法推荐 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签,绑定了2个弹

js对字符的验证方法汇总_javascript技巧

本文实例汇总了js对字符的验证方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: /**//**  * 检查输入的一串字符是否是字符  * 输入:str  字符串  * 返回:true 或 flase; true表示为全部为字符 不包含汉字  */ function checkStr(str){     if (/[^\\x00-\\xff]/g.test(str)) {         return false;     }     else {         return tru