jQuery implementiert die Methode zum Ändern der Bildgröße nach dem Laden des Bildes_jquery

Das Beispiel in diesem Artikel beschreibt die jQuery-Methode zum Ändern der Bildgröße, nachdem das Bild geladen wurde. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Es ist nicht schwierig, die Größe des Bildes zu ändern. Sie können jQuery verwenden, um das CSS zu ändern. Die Voraussetzung besteht jedoch darin, festzustellen, ob das Bild geladen ist. Hauptsächlich über das Ladeereignis von jQuery und onreadystatechange, um seinen Status zu bestimmen.

Für IE6 kann es direkt mit onreadystatechange verarbeitet werden. In IE7 müssen Sie einen Timer verwenden, um den Bereitschaftsstatus des Bildes zu bestimmen. Bei FF und Chrome können Sie das Ladeereignis direkt zur Beurteilung verwenden.

Das Folgende ist der vollständige Code, der im Beispiel verwendet wird:

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

Das obige Bild kann verkleinert und im Artikel angezeigt werden. Wenn gleichzeitig die jQuery-Dialog-UI-Komponente zum Klicken auf das Bild verwendet wird, wird das Bild in voller Größe in einer Ebene angezeigt.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der JQuery-Umschalteffekte und -Techniken“, „Zusammenfassung der jQuery-Drag-Effekte und -Techniken", "Zusammenfassung der JQuery-Erweiterungsfähigkeiten", "Zusammenfassung allgemeiner klassischer Spezialeffekte von jQuery", "Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten", "Zusammenfassung der Verwendung des jQuery-Selektors “ und „Zusammenfassung der allgemeinen jQuery-Plug-ins und der Verwendung “

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.