用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组件单击图片时，以一个层显示完整大小的图片。