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 8a09ea97d634a6a86d3348a91fbef34e=1 limite la largeur, K556c61be61c0649b08c11df00b72cd6d pour définir la largeur et la hauteur de l'image

L'élément 873c4d80998f5627c84fe017b9b46671 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 873c4d80998f5627c84fe017b9b46671.

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 "1d455c0487951f640ab51b2b9deb260e entre 93f0f5c25f18dab9d176bd4f6de5d30e et 9c3bca370b5104690d9ef395f2c5f8d1 " . L'écran est automatiquement rafraîchi toutes les 10 secondes. En conséquence, l'image peut être affichée normalement, mais le rafraîchissement constant de l'écran la rend très inconfortable. (2) window.location.reload() recharge la page, mais le résultat est qu'il est toujours en train de charger la page, de sorte que la page Web ne peut pas être affichée correctement. (3)90e1350e84a8f29eab9528462a6ae8d9200) this.width=200;"align="left">, le test peut réussir, mais si l'image width< height et width>200px, l'effet d'affichage de la page sera que la hauteur dépasse 150. De cette façon, s'il n'y a pas de contrainte K=largeur ou K=hauteur, l'effet de page est déraisonnable, il ne peut donc pas être utilisé.

Option 3 : Mettez l'événement Onload() dans 873c4d80998f5627c84fe017b9b46671 dans ff8b6c3e371e9f96acceec65cada5d84 pour déclencher l'événement lorsque la page est chargée

Après avoir soigneusement analysé l'option 2, le L'auteur a découvert que la raison principale est que l'événement onload est un événement déclenché lors du chargement de la page. Onload est utilisé dans l'élément 9617a69a9711c47d4c7e5f42d8a4909e Lorsque IE l'interprète ici, la page doit être chargée pour déclencher "javascript:width=x;", la page doit donc être rechargée pour afficher l'image. De plus, Onload() est généralement utilisé dans l'élément 9c5594a5fc8d2e506f1a8147102c836b pour pré-compléter l'événement déclenché lors du chargement de la page. Donc, j'ai mis l'événement Onload() dans 873c4d80998f5627c84fe017b9b46671 dans 9c5594a5fc8d2e506f1a8147102c836b, le code est le suivant :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!