jQuery implémente la méthode de modification de la taille de l'image une fois l'image chargée_jquery

L'exemple de cet article décrit la méthode jQuery permettant de modifier la taille de l'image après le chargement de l'image. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il n'est pas difficile de changer la taille de l'image. Vous pouvez utiliser jQuery pour changer le CSS. Mais le principe est de déterminer si l’image est chargée. Principalement via l'événement load de jQuery et onreadystatechange pour déterminer son statut.

Pour IE6, il peut être traité directement en utilisant onreadystatechange. Dans IE7, vous devez utiliser une minuterie pour déterminer l'état prêt de l'image. Pour FF et Chrome, vous pouvez directement utiliser l'événement de chargement pour juger.

Ce qui suit est le code complet utilisé dans l'exemple :

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

L'image ci-dessus peut être réduite et affichée dans l'article. En même temps, lorsque le composant jQuery Dialog UI est utilisé pour cliquer sur l'image, l'image en taille réelle sera affichée sur un seul calque.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets et techniques de commutation JQuery", "Résumé des effets et techniques de glisser jQuery", "Résumé des compétences d'extension JQuery", "Résumé des effets spéciaux classiques communs de jQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery " et "Résumé des plug-ins courants et de leur utilisation jQuery "

J'espère que cet article sera utile à tous ceux qui programment jQuery.