Exemple de code expliquant comment modifier dynamiquement la taille d'affichage de l'image à l'aide de JavaScript

Lorsque nous souhaitons afficher plusieurs images de tailles différentes passées depuis l'arrière-plan, afin d'assurer la cohérence de la taille de l'image et la coordination des proportions, nous devons modifier dynamiquement la taille d'affichage de l'image. Grâce à la recherche, nous pouvons trouver le code jQuery qui implémente cette fonction sur Internet comme suit. Ce code peut maintenir la taille de l'image dans une certaine plage. Si la taille originale de l'image est supérieure à la valeur max*, la largeur des images affichées sera égale.

$(document).ready(function() {
     $('.post img').each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100; // 图片最大高度
     var ratio = 0; // 缩放比例
     var width = $(this).width(); // 图片实际宽度
     var height = $(this).height(); // 图片实际高度
   
     // 检查图片是否超宽
     if(width > maxWidth){
         ratio = maxWidth / width; // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio; // 计算等比例缩放后的高度 
         $(this).css("height", height); // 设定等比例缩放后的高度
     }
   
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight); // 设定实际显示高度
         width = width * ratio; // 计算等比例缩放后的高度
         $(this).css("width", width * ratio); // 设定等比例缩放后的高度
     }
 });
 });

Lors du test de l'effet dans différents navigateurs, il a été constaté que cette méthode d'écriture ne peut pas être adaptée au navigateur Chrome et provoquera un bug où l'image est affichée dans sa taille d'origine. Il s'avère que l'événement document ready commence à s'exécuter lorsque le document HTML est chargé et que le DOM est prêt, même si les ressources image n'ont pas encore été chargées. Il y a un dicton sur Internet selon lequel l'envelopper avec la méthode $(window).load() peut résoudre le problème d'affichage incorrect dans le navigateur Chrome ----- l'événement de chargement de fenêtre est exécuté un peu plus tard et il est utilisé dans la page entière, y compris les frames, l'exécution commence après le chargement des objets et des images. A partir de cette différence, nous pouvons analyser que lorsque le navigateur Chrome n'utilise pas la méthode $(window).load() pour traiter les images, l'ordre d'exécution du code js pour le chargement des images et la modification dynamique des images est incertain.

Le module d'image intérieure sur lequel je travaille récemment nécessite que l'image intérieure soit chargée depuis l'arrière-plan et affichée sur la page afin d'assurer la cohérence de la taille de l'image et la coordination des proportions de l'image. la taille d'affichage doit être modifiée dynamiquement puis redimensionnée. L'emplacement AP correspondant est affiché sur la carte intérieure. Il y a trois étapes ici :
1. Envoyer une requête ajax, obtenir l'URL de l'image intérieure qui doit être chargée, mettre à jour le dom et afficher l'image intérieure
2. Changer dynamiquement la taille d'affichage de l'image
3. Afficher sur l'image intérieure Les coordonnées de position ap correspondantes
Au début j'ai fait ceci :
Envoyer une requête ajax, changer dynamiquement la taille d'affichage de l'image dans la fonction return success et envoyer une requête ajax pour afficher le coordonnées de position ap correspondantes sur la carte intérieure, le résultat final L'image est affichée dans sa taille d'origine ma méthode d'ajustement est :
Envoyer une requête ajax, et dans la fonction de retour succès

var img= new Image();
    img.src = url;
    img.onload = function(){
    // 需要执行的程序
         动态改变图片实现尺寸并发送ajax请求在室内图上显示对应的ap位置坐标
    }

Le. l'image résultante est affichée après avoir changé dynamiquement la taille

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!