jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法

更新時間：2016年03月29日 11:37:26 作者：Fanteathy

這篇文章主要介紹了jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法,結(jié)合實例形式分析了jQuery圖片樣式與頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法。分享給大家供大家參考，具體如下：

要改變圖片的大小并不難，可以用jQuery操作css改變。但是前提是要判斷圖片是否加載完成。主要是通過jQuery的load事件和onreadystatechange來判斷其狀態(tài)。

對于IE6，用onreadystatechange可以直接處理，在IE7中，則需要用定時器來判斷圖片的readystate狀態(tài)。而對于FF和Chrome剛可以直接用load事件來判斷。

以下是在實例中使用的完整代碼：

<script type="text/javascript">
$(document).ready(function(){
  function changeSize(obj){
  //本函數(shù)用于在圖片加載時對圖片大小等進(jìn)行設(shè)置
   w=obj.width();
   h=obj.height();
   t=obj.attr("title");
   src=obj.attr("src");
   obj.width(w>400?400:w);
   obj.height(w>400?(400/w)*h:h);
   obj.css("cursor","pointer");
   obj.click(function(){
    $("#picDlg").html("<img src="+src+" border=0/>").fadeIn(1000).dialog({
     width:"auto",
     height:"auto",
     title:t,
     modal:true,
     draggable:false,
     resizable:false
    })
   })
  }
  if($.browser.msie){
   //IE 6.0
   if($.browser.version==6.0){
    $(".bodyLeft img").each(function(ind,ele){
     // ele.onreadystatechange =function(){
      if(ele.readyState == "complete"||ele.readyState=="loaded"){
       changeSize($(this));
      }
     //}
    })
   }
   //IE 6.0以上
   else{
    $(".bodyLeft img").each(function(){
     tempTimer=window.setInterval(function(ind,ele){
      if(ele.readyState=="complete"){
       window.clearInterval(tempTimer);
       changeSize($(this));
      }
      else{
       return;
      }
     },200);
    })
   }
  }
  //FF,Chrome
  else{
   $(".bodyLeft img").each(function(ind,ele){
    alert(ele.complete);
    if(ele.complete==true){
     changeSize($(this));
    }
   })
  }
})
</script>

上面的圖片可以將圖片等比例縮小顯示在文章中，同時使用的jQuery的Dialog UI組件單擊圖片時，以一個層顯示完整大小的圖片。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: