jQuery implements the method of changing the image size after the image is loaded

jQuery implements the method of changing the image size after the image is loaded_jquery

WBOY

Release： 2016-05-16 15:07:45

Original

1301 people have browsed it

The example in this article describes the jQuery method of changing the image size after the image is loaded. Share it with everyone for your reference, the details are as follows:

It is not difficult to change the size of the image. You can use jQuery to change the css. But the premise is to determine whether the image is loaded. Mainly through jQuery's load event and onreadystatechange to determine its status.

For IE6, it can be processed directly using onreadystatechange. In IE7, you need to use a timer to determine the readystate status of the image. For FF and Chrome, you can directly use the load event to judge.

The following is the complete code used in the example:

<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>

Copy after login

The above picture can be scaled down and displayed in the article. At the same time, when the jQuery Dialog UI component is used to click the picture, the full-sized picture will be displayed in one layer.

Readers who are interested in more jQuery related content can check out the special topics on this site: "JQuery switching effects and techniques summary", "jQuery drag effects and techniques summary", "JQuery extension skills summary", "jQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage Summary " and "Summary of jQuery common plug-ins and usage "

I hope this article will be helpful to everyone in jQuery programming.