html判断图片宽图还是窄图,JS判断图片是否加载完成并获取图片宽度

客户上传图片将网页内容区撑破了，以下就这个问题提供一种如何使用js处理这个问题的方法。

具体思路：

在js判断客户端的图片下载完毕后，对该图片的宽度或高度做一些处理。

js处理图片主要是利用js中Image对象，通过 onload 事件和 onreadystatechange 来进行判断。

方法1，通过onload事件，例如：

复制代码 代码示例:

var obj=new Image();

obj.src="http://www.jquerycn.cn/uploadfiles/editor/201107240502201179.jpg";

obj.οnlοad=function(){

alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);

document.getElementById("mypic").innnerHTML="";

}

onloading……

方法2，使用 onreadystatechange 判断

复制代码 代码示例:

var obj=new Image();

obj.src="http://www.jquerycn.cn/uploadfiles/editor/201107240502201179.jpg";

obj.onreadystatechange=function(){

if(this.readyState=="complete"){

alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);

document.getElementById("mypic").innnerHTML="";

}

}

onloading……

附，js获取图片宽高的代码

复制代码 代码示例: