做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况，下面就这个问题我们一种如何使用js处理这个问题的方法，具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理，js处理图片主要是利用js中Image对象，通过 onload 事件和 onreadystatechange 来进行判断。
（1）第一中方法，通过onload事件，比如：
复制代码 代码如下:<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.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.phpernote.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判断图片是否加载完成方法汇总(最新版)
- js实现图片在未加载完成前显示加载中字样
- js或者jquery判断图片是否加载完成实现代码
- js判断图片加载完成后获取图片实际宽高的方法
- 使用JavaScript判断图片是否加载完成的三种实现方式
- JavaScript控制图片加载完成后调用回调函数的方法
- JavaScript实现判断图片是否加载完成的3种方法整理
- JavaScript怎么判断图片是否加载完成以便获取其尺寸
- javascript判断图片是否加载完成的方法推荐
- JS实现判断图片是否加载完成的方法分析
