jQuery实现图片加载完成后改变图片大小的方法

本文实例讲述了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,Chromeelse{ $（".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程序设计有所帮助。