js圖片載入擷取不到寬度和高度解決方案總結

第一次瀏覽的時候你根本就擷取不到圖片的寬高值，列印出來都是0，這些糾結了吧，怎麼解決呢？就用setTimeout延時載入，200毫秒之後就執行，等圖片徹底載入完之後就可以擷取寬高了，這樣就實現了只適應寬高和水平垂直置中了。

代碼

代碼如下

複製代碼

var parent=$(".imgshow a img");         parent.click(function(){  //alert(test.width());                 var url=$(this).attr("big_show");                         var big_i=$(".big_show img");                            big_i.attr("src",url);                         big_i.hide();                         if(big_i.is(":hidden")){                             setTimeout(function(){                             $(".big_show").show();                             big_i.show();                             $(".big_show").width(big_i.width());                             $(".big_show").height(big_i.height());                                   var top=-(big_i.height()/2);                             var left=-(big_i.width()/2);                             $(".big_show").css({"margin-left":left,"margin-top":top});                     //alert(left);                     },200)                   }                               })

執行個體

只要圖片載入完畢時才能擷取到載入的圖片的寬度和高度，你的意思是再圖片載入前顯示載入等待圖片，然後再顯示載入後的圖片吧？
只要判斷圖片是否載入完畢，然後再擷取圖片屬性，下面是個例子

   

代碼如下

複製代碼

*      * @param sUrl 圖片的url      * @param fCallback 回呼函數，fCallback至少有一個類型為object類型的參數用來接收圖片的寬、高、url      *       * usage:      * var url = "-05-26/c/c21ff1138e7349859b49b99312d05baf.jpg";      * FGetImg(url, function(img){alert('width:'+img.width+";height:"+img.height+";url:"+img.url);});      *      */      var FGetImg = function(sUrl, fCallback)      {         var img = new Image();      img.src = sUrl + '?t=' + Math.random();    //IE下，ajax會緩衝，導致onreadystatechange函數沒有被觸發，所以需要加一個隨機數      if (FBrowser.isIE)      {          img.onreadystatechange = function()          {          if (this.readyState=="loaded" || this.readyState=="complete")          {              fCallback({width:img.width, height:img.height, url:sUrl});          }          };      }else if (FBrowser.isFirefox || FBrowser.isSafari || FBrowser.isOpera || FBrowser.isChrome)      {          img.onload = function()          {          fCallback({width:img.width, height:img.height, url:sUrl});          };      }      else      {          fCallback({width:img.width, height:img.height, url:sUrl});  }  };

如果只是擷取圖片id有還是不準的下面來看另一種方法,你在圖片下載完成時，直接擷取你新建立的im標籤的width屬性就可以了，你拿我的給你改過的代碼運行一下，我這是能擷取得到的

代碼如下	複製代碼
<script language="javascript" type="text/javascript"> $(function(){ var im = new Image(); im.src = $('#test').attr('loadsrc'); $(im).load(function(){   $('#test').attr('src',$('#test').attr('loadsrc'));   alert(im.width);  //關鍵是這一句 })         }); </script>

一個擷取遠程圖片大小的代碼

 

代碼如下

複製代碼

/*!  @FileOverview 擷取圖片尺寸  @date 2010/11/29  @param cfg 配置項，cfg.img為一個圖片對象的引用或者圖片的url，cfg.oncomplete為擷取尺寸後的後續操作，即回呼函數。具體應用請看例子  @return none   */ function getImageSize(cfg){     var img=document.createElement('img'),         callback=cfg.oncomplete;     img.src = typeof cfg.img == 'string'?cfg.img:cfg.img.src;     img.setAttribute('style','position:absolute;visibility:hidden;');     document.body.appendChild(img);     img.onload=img.onerror=img.onreadystatechange=function(){         if(img&&img.readyState&&img.readyState!='loaded'&&img.readyState!='complete')             return;         img.onload = img.onreadystatechange = img.onerror = null;         callback.call({"width":img.width,"height":img.height},null);         img.parentNode.removeChild(img);         img=null;     }; }   /* 例子1，擷取遠程圖片的尺寸 */ getImageSize({         img:'http://www.qiqiboy.com/wp-content/uploads/2010/11/bing.png',         oncomplete:function(){             alert('寬度：'+this.width+'，'+'高度：'+this.height)         }     });   /* 例子2，限制class為myimg的圖片的大小為600以內 */ var imgs=getElementsByClassName('myimg','img',document),//getElementsByClassName為一個自寫的結點擷取方法，不是JS原生支援的哦     maxWidth=600;//最大寬度為600 for(var i=0;i<imgs.length;i++){     getImageSize({         img:imgs[i],         oncomplete:function(){             if(this.width>maxWidth){                 imgs[i].height=Math.round(this.height/this.width*maxWidth);                 imgs[i].width=maxWidth;             }         }     }); }