Ausführliche Erklärung, wie JavaScript drei Methoden zum Ändern der Bildgröße verwendet

Wie wir alle wissen, sind farbenfrohe Web-Kursmaterialien untrennbar mit der Unterstützung von Bildern verbunden. Während Bilder die Lebendigkeit von Webseiten erhöhen, erhöhen sie auch die Größe von Webseiten und verlangsamen die Download-Geschwindigkeit. Wie man ein Bild auf der Seite einer Website in einer angemessenen Größe anzeigt, ist ein Thema, das es wert ist, untersucht zu werden. Zu diesem Zweck hat der Autor einige seiner eigenen Erfahrungen als Referenz für Drehbuchautoren aufgeschrieben, um sich gegenseitig zu ermutigen.

Anforderungsanalyse: Diese Website verwendet ein Nachrichtenverwaltungssystem. In der Nachrichtenspalte der Startseite müssen Bilddateien als Bilder in den Bildnachrichten aufgerufen werden, sodass ein Textumbruchformular entsteht. Je nach Layout-Anforderungen darf die Breite des Bildes 200 Pixel nicht überschreiten.

Das Problem, Bilder in angemessener Größe anzeigen zu können, ist im Wesentlichen ein Problem der Verkleinerung großer Bilder. Wie man die Größe (Breite, Höhe) des Bildes über die URL des Bildes erhält, ist der Schlüssel zum Problem. Angenommen, k=Breite/Höhe stellt den Proportionalwert des Bildes dar, solange K>=1 die Breite darf 200 Pixel nicht überschreiten, die Höhe muss <= 200 Pixel sein, im Gegenteil, K<1, solange die Höhe 150 Pixel nicht überschreitet, muss die Breite <= 150 Pixel sein (unter normalen Umständen Breite: Höhe). =4:3). Solange also K>=1 die Breite begrenzt, begrenzt K<1 die Höhe.

Option 1: Verwenden Sie das Image()-Objekt von Javascript, um das Bild dynamisch zu laden und die Höhe und Breite des Bildes zu ermitteln.

<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();    
//创建对象；
imgObj.src = theURL;   
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度；       
height=imgObj.height; 
//是否已取得了图像的高度；      
 k=width/height; 
 //获取图像比例值；        
 if(k>=1){         
 if (width>=200){          
 width=200;          
 height=width/k;         
 }}        
 else                
 {if (height>=200){          
 height=200;           
 width=k?height;           
 }          
 }
 showimg(theURL,width,height);       
 }   
 else    
 setTimeout("checkImg(&#39;" + theURL + "&#39;)", 100) 
 //通过Image对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查。
 }
 }
 functionshowimg(theURL,x,y){document.write("<imgsrc="+theURL+""+"width="+x+""+"height="+y+"border=&#39;0&#39;"+""+"align=&#39;left&#39;>");}   //-->
 </script>
 <scriptlanguage="javascript">checkImg("Bt0085.jpg");
 </script>

Ergebnis: Der Code wurde in die Homepage-Datei (default.asp) übertragen und dann trat beim Bestehen des Servertests ein Problem auf. Bei der Eingabe der URL erscheint zunächst das bearbeitete Bild im Browser. Klicken Sie in der Symbolleiste auf „Zurück“, um den Inhalt der Startseite anzuzeigen. Nochmals getestet und das Ergebnis war normal. Das gleiche Phänomen tritt jedes Mal auf, wenn das Bild aktualisiert wird, oder das gleiche Problem tritt jedes Mal auf, wenn ein Computer geöffnet wird, der diese Website nicht besucht hat.

Ursachenanalyse: Die Eigenschaften des Image () -Objekts werden hauptsächlich verwendet, um den Bildrolleffekt zu erzielen. Die Bilder können im Voraus auf den Client heruntergeladen werden, sodass beim Wechseln zwischen Bildern keine Zeitverzögerung auftritt. Verwenden Sie wie im folgenden Code das src-Attribut des Image-Objekts, um den Pfad (URL) des Bildes anzugeben, sodass das Bild pic2.gif im Bilderverzeichnis auf den Client heruntergeladen wird. var myImg = newImage();myImg.src = "pic.gif";

Dieser Code zwingt den Browser, mit dem Herunterladen des angegebenen Bildes vom Server zu beginnen, wenn sich dieses Bild im Cache des Clients befindet (Cache ) wird der Browser diese automatisch überschreiben. Auf diese Weise ändert sich das Bild sofort und ohne Zeitverzögerung, wenn der Benutzer mit der Maus über das Bild fährt. Wenn das Bild also zum ersten Mal angezeigt wird, kann die Homepage-Datei beim zweiten Mal normal angezeigt werden. Dies ist der Grund. Daraus kam ich zu dem Schluss, dass das Image()-Objekt nicht zum Abrufen der Eigenschaften des Bildes verwendet werden kann und die Lösung des Problems geändert werden sollte.

Option 2: Verwenden Sie die ID in , um die Breite und Höhe des Bildes zu definieren.

Das -Element kann den Anzeigebereich definieren. die Höhe und Breite des Bildes (Width). Wenn das Verarbeitungsereignis ausgelöst wird, kann der Effekt durch dynamisches Ändern der beiden Eigenschaften des Diagramms erzielt werden.

<script>
functionshow()   
{var w,h;   
var k;   
var con;  
w=smallslot.width;  
 h=smallslot.height;   
 k=w/h;  
 if(k>=1){         
 if (w>=200){           
 w=200;          
 h=w/k;         
 }}         
 else                
 {if(h>=150){           
 h=150;          
  w=k?h;          
  }           
  }       
  return w;
  }
  </script>
  <imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
  <script languge="javascript">      
   varx=show();   
   </script>

In diesem Code wird die Breite des verarbeiteten Bildes als Rückgabewert der Funktion show() verwendet. Verwenden Sie das Onload-Ereignis, um die Breite des Bildes in aufzurufen.

Problem: Die Bilder in den Bildnachrichten auf der Homepage werden nicht angezeigt. Klicken Sie auf die Schaltfläche „Los“ in der Adressleiste, um sie normal anzuzeigen. Die Praxis zeigt mir einen weiteren Misserfolg! Denn das Einzige, was Internetnutzer gewohnt sind, ist die Eingabe der URL und die Eingabe der Eingabetaste. Auf dieser Grundlage hat der Autor folgende Versuche unternommen: (1) Fügen Sie „ zwischen und

<body onload="window.smallslot.width=show();">
<script>       
function show()           
{…..
//show()       
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest!