本文實例講述了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?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組件單擊圖片時，以一個層顯示完整大小的圖片。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
