Comment résoudre le problème selon lequel jquery ne peut pas obtenir la taille de l'image dans Google Chrome_jquery

Le code est le suivant :

$(document).ready(function(){ 
 var img_h=$img.height();  
 var img_w=$img.width();  
}) 

Le code ci-dessus ne pose aucun problème dans IE et Firefox, mais il peut causer des problèmes dans Google. La raison pour laquelle la taille est en rupture de stock est que l'image n'a pas été chargée.

La méthode de modification est la suivante :

$(document).ready(function(){ 
 $img.load(function(){  
  var img_h=$img.height();  
  var img_w=$img.width();  
 }) 
}) 

Il reste encore du temps, je vais donc partager avec vous Comment changer dynamiquement la taille d'affichage de l'image avec jQuery Les détails sont les suivants.

Lorsque nous souhaitons afficher plusieurs images de tailles différentes transmises 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.

Code d'origine :

$(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);  // 设定等比例缩放后的高度
   }
 });
 });

J'utilise également cette méthode d'écriture dans mon code js. Cependant, lors des tests d'effet sur différents navigateurs, il a été constaté que cette méthode d'écriture ne peut pas être adaptée au navigateur Chrome (le numéro de version de Chrome est 10.0.648.204) et provoquera un bug où l'image est affichée dans sa taille d'origine. Plus tard, le code de $('.post img').each() a été encapsulé avec la méthode $(window).load(), ce qui a résolu le problème d'affichage incorrect dans le navigateur Chrome. Alors pourquoi un bug se produit-il dans le navigateur Chrome et quelle est la différence entre $(document).ready et $(window).load ?

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. L'événement de chargement de fenêtre est exécuté un peu plus tard. Il démarre l'exécution une fois que la page entière, y compris les cadres, les objets et les images, est chargée. À 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.

-------------------------------------------------------------- --- -----

Ce qui précède est l'intégralité du contenu de l'article. Concernant le code ci-dessus, lorsqu'il sera placé sur ma page pour obtenir la hauteur de l'image, une erreur sera signalée, indiquant que la méthode width n'est pas fournie

var width = $(this).width();  // 图片实际宽度
var height = $(this).height(); // 图片实际高度

Le code modifié est donc le suivant :

jQuery(window).load(function () {
      jQuery("div.product_info img").each(function () {
        DrawImage(this, 680, 1000);
      });
    });
    function DrawImage(ImgD, FitWidth, FitHeight) {
      var image = new Image();
      image.src = ImgD.src;
      if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
          if (image.width > FitWidth) {
            ImgD.width = FitWidth;
            ImgD.height = (image.height * FitWidth) / image.width;
          } else {
            ImgD.width = image.width;
            ImgD.height = image.height;
          }
        } else {
          if (image.height > FitHeight) {
            ImgD.height = FitHeight;
            ImgD.width = (image.width * FitHeight) / image.height;
          } else {
            ImgD.width = image.width;
            ImgD.height = image.height;
          }
        }
      }
    }

Le contenu ci-dessus est ce que je partage avec vous sur la façon de résoudre le problème selon lequel jquery ne peut pas obtenir la taille de l'image sous Google Chrome et comment jQuery modifie dynamiquement la taille d'affichage de l'image. J'espère que vous l'aimerez, et je. J'espère également que mes amis continueront à prêter attention à ce site. Merci.