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

发布时间:2020-01-17编辑:脚本学堂
分享一例js代码,用于判断图片是否加载完成,并获取图片宽度信息,有需要的朋友做个参考。

客户上传图片将网页内容区撑破了,以下就这个问题提供一种如何使用js处理这个问题的方法。
具体思路:
在js判断客户端的图片下载完毕后,对该图片的宽度或高度做一些处理。
js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

方法1,通过onload事件,例如:
 

复制代码 代码示例:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.jb200.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

方法2,使用 onreadystatechange 判断
 

复制代码 代码示例:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.jb200.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>

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

复制代码 代码示例:
<img src="" onload="alert(this.width);alert(this.height)">