夏日博客

A-A+

js图片加载获取不到宽度和高度解决方法总结

2016年01月21日 前端设计 暂无评论 阅读 5 views 次

本文章总结了关于js图片加载获取不到宽度和高度解决方法,有需要的朋友可参考一下.

第一次浏览的时候你根本就获取不到图片的宽高值,打印出来都是0,这些纠结了吧,怎么解决呢?就用setTimeout延时加载,200毫秒之后就执行,等图片彻底加载完之后就可以获取宽高了,这样就实现了只适应宽高和水平垂直居中了,代码如下:

  1. var parent=$(".imgshow a img");  
  2.         parent.click(function(){   
  3.  //alert(test.width());  
  4.                 var url=$(this).attr("big_show");  
  5.   
  6.                         var big_i=$(".big_show img");     
  7.   
  8.                         big_i.attr("src",url);  
  9.   
  10.                         big_i.hide();  
  11.   
  12.                         if(big_i.is(":hidden")){  
  13.   
  14.                             setTimeout(function(){  
  15.   
  16.                             $(".big_show").show();  
  17.   
  18.                             big_i.show();  
  19.   
  20.                             $(".big_show").width(big_i.width());  
  21.   
  22.                             $(".big_show").height(big_i.height());        
  23.   
  24.                             var top=-(big_i.height()/2);  
  25.   
  26.                             var left=-(big_i.width()/2);  
  27.   
  28.                             $(".big_show").css({"margin-left":left,"margin-top":top});  
  29.                     //alert(left);  
  30.                     },200)     
  31.                 }   
  32.                    
  33.             })  

实例,只要图片加载完毕时才能获取到加载的图片的宽度和高度，你的意思是再图片加载前显示加载等待图片，然后再显示加载后的图片吧？只要判断图片是否加载完毕,然后再获取图片属性,下面是个例子,代码如下:

  1.   *   
  2.      * @param sUrl 图片的url   
  3.      * @param fCallback 回调函数，fCallback至少有一个类型为object类型的参数用来接收图片的宽、高、url   
  4.      *    
  5.      * usage:   
  6.      * var url = "-05-26/c/c21ff1138e7349859b49b99312d05baf.jpg";   
  7.      * FGetImg(url, function(img){alert('width:'+img.width+";height:"+img.height+";url:"+img.url);});   
  8.      *   
  9.      */    
  10.     var FGetImg = function(sUrl, fCallback)    
  11.     {       
  12.     var img = new Image();    
  13.     img.src = sUrl + '?t=' + Math.random();    //IE下，ajax会缓存，导致onreadystatechange函数没有被触发，所以需要加一个随机数    
  14.     if (FBrowser.isIE)    
  15.     {    
  16.         img.onreadystatechange = function()    
  17.         {    
  18.         if (this.readyState=="loaded" || this.readyState=="complete")    
  19.         {    
  20.             fCallback({width:img.width, height:img.height, url:sUrl});    
  21.         }    
  22.         };    
  23.     }else if (FBrowser.isFirefox || FBrowser.isSafari || FBrowser.isOpera || FBrowser.isChrome)    
  24.     {    
  25.         img.onload = function()    
  26.         {    
  27.         fCallback({width:img.width, height:img.height, url:sUrl});    
  28.         };    
  29.     }    
  30.     else    
  31.     {    
  32.         fCallback({width:img.width, height:img.height, url:sUrl});    
  33. }    
  34. };  

如果只是获取图片id有还是不准的下面来看另一种方法,你在图片下载完成时，直接获取你新创建的im标签的width属性就可以了,你拿我的给你改过的代码运行一下,我这是能获取得到的,代码如下:

  1. <script language="javascript" type="text/javascript">  
  2. $(function(){  
  3. var im = new Image();  
  4. im.src = $('#test').attr('loadsrc');  
  5. $(im).load(function(){  
  6.   $('#test').attr('src',$('#test').attr('loadsrc'));  
  7.   alert(im.width);  //关键是这一句  
  8. })           
  9. });  
  10. </script>  
标签：

给我留言