js判断图片是否加载完成并获取图片的宽度的二种方法

做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用javascript中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

(1)第一中方法,通过onload事件,比如:

  1. <script type="text/javascript"> 
  2. var obj=new Image(); 
  3. obj.src="http://www.daimajiayuan.com/uploads/1307/1-130H30Z314511.jpg"
  4. obj.onload=function(){ 
  5.     alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height); 
  6.     document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />"; 
  7. </script> 
  8. <div id="mypic">onloading……</div> 

(2)第二种方法,使用 onreadystatechange 来判断

  1. <script type="text/javascript"> 
  2. var obj=new Image(); 
  3. obj.src="http://www.daimajiayuan.com/uploads/1307/1-130H30Z314511.jpg"
  4. obj.onreadystatechange=function(){ 
  5.     if(this.readyState=="complete"){ 
  6.         alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height); 
  7.         document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />"; 
  8.     } 
  9. </script> 
  10. <div id="mypic">onloading……</div> 

转载请注明:代码家园 » js判断图片是否加载完成并获取图片的宽度的二种方法

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)