JS获取图片高度宽度的方法分享
更新时间：2015年04月17日 11:35:10 投稿：hebedich
这篇文章主要介绍了JS获取图片高度宽度的方法，开始的时候没能做到兼容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数据的，道理是一样的
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要为大家详细介绍了Bootstrap响应式侧边栏改进版，结合导航条和下拉菜单进行改进,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
本篇文章主要介绍了three.js实现围绕某物体旋转的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了使用FormData实现上传多个文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了JavaScript element的Form表单生成方式,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了ES2020让代码更优美的运算符 (?.) (??)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
微信小程序是一种全新的连接用户与服务的方式，下面这篇文章主要给大家介绍了关于加快微信小程序开发的一些小建议，需要的朋友可以参考下2021-05-05
这篇文章主要为大家详细介绍了微信小程序实现YDUI的ScrollNav组件，滚动导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
移动端翻页插件dropload.js（支持Zepto和jQuery）
这篇文章主要为大家详细介绍了移动端翻页插件dropload.js，支持Zepto和jQuery，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
html里的marqueen也能实现内容的滚动，但滚动是间断的，运用JavaScript可以使这一问题得到改观，实现无间断的滚动,让页面看起来更美观2013-04-04
踩了很多次坑,终于在微信小程序中搞定了图片上传以及内容安全审核,下面这篇文章主要给大家介绍了关于微信小程序图片上传以及内容安全审核的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论