这篇文章主要介绍了 JS 获取图片高度宽度的方法,开始的时候没能做到兼容 chrome,在度娘和众网友的帮助下,最终完成了完美兼容,这里分享给大家,有需要的小伙伴可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一般获取图片高度宽度的写法:
- 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 数据的,道理是一样的
来源: