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 hinzu. . Der Bildschirm wird automatisch alle 10 Sekunden aktualisiert. Dadurch kann das Bild normal angezeigt werden, die ständige Aktualisierung des Bildschirms macht es jedoch sehr unangenehm. (2) window.location.reload() lädt die Seite neu, aber das Ergebnis ist, dass die Seite ständig geladen wird, sodass die Webseite nicht korrekt angezeigt werden kann. (3), der Test kann bestanden werden, aber wenn das Bild Breite < Höhe und Breite> 200 Pixel. Der Seitenanzeigeeffekt besteht darin, dass die Höhe 150 überschreitet. Wenn also keine Einschränkung von K = Breite oder K = Höhe besteht, ist der Seiteneffekt unangemessen und kann daher nicht verwendet werden.

Option 3: Fügen Sie das Onload()-Ereignis in ein, um das Ereignis auszulösen, wenn die Seite geladen wird

Nach sorgfältiger Analyse der Option 2 wird das Der Autor stellte fest, dass der Hauptgrund darin liegt, dass das Onload-Ereignis ein Ereignis ist, das beim Laden der Seite ausgelöst wird. Onload wird im -Element verwendet. Wenn der IE es hier interpretiert, muss die Seite geladen werden, um „javascript:width=x;“ auszulösen, sodass die Seite neu geladen werden muss, um das Bild anzuzeigen. Darüber hinaus wird Onload() im Allgemeinen im -Element verwendet, um das beim Laden der Seite ausgelöste Ereignis vorab abzuschließen. Also habe ich das Onload()-Ereignis in in eingefügt, der Code lautet wie folgt:

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

　再次测试，通过了，而且首页调用成功！我成功了！　　经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie JavaScript drei Methoden zum Ändern der Bildgröße verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!