jQuery實作圖片載入完成後改變圖片大小的方法

jQuery實作圖片載入完成後改變圖片大小的方法_jquery

WBOY

發布： 2016-05-16 15:07:45

原創

1301 人瀏覽過

本文實例講述了jQuery實作圖片載入完成後改變圖片大小的方法。分享給大家參考，具體如下：

要改變圖片的大小並不難，可以用jQuery操作css改變。但是前提是要判斷圖片是否載入完成。主要是透過jQuery的load事件和onreadystatechange來判斷其狀態。

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

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

<script type="text/javascript">
$(document).ready(function(){
  function changeSize(obj){
  //本函数用于在图片加载时对图片大小等进行设置
   w=obj.width();
   h=obj.height();
   t=obj.attr("title");
   src=obj.attr("src");
   obj.width(w>400&#63;400:w);
   obj.height(w>400&#63;(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元件點擊圖片時，以一個圖層顯示完整大小的圖片。

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖曳特效與技巧總結》、《jQuery擴充技巧摘要》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程式設計有所幫助。