Explication détaillée de la façon dont JavaScript utilise trois méthodes pour modifier la taille de l'image

Comme nous le savons tous, les didacticiels Web colorés sont indissociables du support des images. Si les images augmentent la vivacité des pages Web, elles augmentent également la taille des pages Web et ralentissent la vitesse de téléchargement. Comment afficher une image sur la page dans une taille appropriée sur un site Web est une question qui mérite d'être étudiée. À cette fin, l'auteur a mis par écrit certaines de ses propres expériences à titre de référence pour les scénaristes, afin de s'encourager mutuellement.

Analyse des besoins : ce site Web utilise un système de gestion des actualités. Dans la colonne d'actualités de la page d'accueil, les fichiers image doivent être appelés depuis la base de données en tant qu'images dans l'actualité illustrée, formant ainsi un formulaire d'habillage de texte. Selon les besoins de mise en page, la largeur de l'image ne peut pas dépasser 200px.

Le problème de permettre l'affichage des images à des tailles appropriées est essentiellement un problème de réduction de grandes images. Comment obtenir la taille (largeur, hauteur) de l'image via l'URL de l'image est la clé du problème. Supposons que k=Largeur/Hauteur représente la valeur de proportion de l'image lorsque K>=1, à condition que. la largeur ne dépasse pas 200px, la hauteur doit être <= 200px; au contraire, K<1, tant que la hauteur ne dépasse pas 150Px, la largeur doit être <=150px (dans des circonstances normales, largeur:hauteur =4:3). Ainsi, tant que K>=1 limite la largeur, K<1 limite la hauteur.

Option 1 : Utilisez l'objet Image() de javascript pour charger dynamiquement l'image et obtenir la hauteur et la largeur de l'image.

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

Résultat : Le code a été transplanté dans le fichier de la page d'accueil (default.asp), puis un problème est survenu lorsqu'il a réussi le test du serveur. Lors de la saisie de l'URL, l'image traitée apparaît d'abord dans le navigateur. Cliquez sur "Retour" dans la barre d'outils pour afficher le contenu de la page d'accueil. Testé à nouveau et le résultat était normal. Le même phénomène se produira à chaque fois que l'image sera mise à jour, ou le même problème se produira à chaque fois qu'un ordinateur qui n'a pas visité ce site Web sera ouvert.

Analyse des raisons : les caractéristiques de l'objet Image() sont principalement utilisées pour obtenir l'effet de roulement d'image. Les images peuvent être téléchargées sur le client à l'avance, de sorte qu'il n'y a pas de délai pour basculer entre les images. Comme dans le code ci-dessous, utilisez l'attribut src de l'objet Image pour spécifier le chemin (URL) de l'image, afin que l'image pic2.gif dans le répertoire images soit téléchargée sur le client. var myImg = newImage();myImg.src = "pic.gif";

Ce code forcera le navigateur à commencer à télécharger l'image spécifiée depuis le serveur, s'il y a cette image dans le cache du client (Cache ), le navigateur l'écrasera automatiquement. De cette façon, lorsque l'utilisateur déplace la souris sur l'image, l'image change immédiatement, sans aucun délai. Ainsi, si l'image est affichée pour la première fois, le fichier de la page d'accueil peut s'afficher normalement la deuxième fois. C'est la raison. De là, je suis arrivé à la conclusion que l'objet Image() ne peut pas être utilisé pour obtenir les propriétés de l'image et que la solution au problème doit être modifiée.

Option 2 : Utiliser l'ID dans pour définir la largeur et la hauteur de l'image

L'élément la hauteur et la largeur de l'image (Largeur). Lorsque l'événement de traitement est déclenché, l'effet peut être obtenu en modifiant dynamiquement les deux propriétés du graphique.

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

Dans ce code, la largeur de l'image traitée est utilisée comme valeur de retour de la fonction show(). Utilisez l'événement onload pour appeler la largeur de l'image dans .

Problème : Les images dans l'actualité des images sur la page d'accueil ne s'affichent pas. Cliquez sur le bouton "Go" dans la barre d'adresse pour les afficher normalement. La pratique me signale un autre échec ! Parce que la seule chose à laquelle les internautes sont habitués est de saisir l’URL et de taper Entrée. Sur cette base, l'auteur a fait les tentatives suivantes : (1) Ajouter " entre et

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