So lösen Sie das Problem, dass jquery die Größe des Bildes in Google Chrome_jquery nicht ermitteln kann

Der Code lautet wie folgt:

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

Der obige Code ist in IE und Firefox kein Problem, kann jedoch in Google zu Problemen führen. Der Grund, warum die Größe nicht vorrätig ist, liegt darin, dass das Bild nicht geladen wurde.

Die Änderungsmethode ist wie folgt:

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

Es ist noch etwas Zeit, also werde ich es mit Ihnen teilen So ändern Sie die Bildanzeigegröße mit jQuery. Die Details sind wie folgt.

Wenn wir mehrere vom Hintergrund übertragene Bilder unterschiedlicher Größe anzeigen möchten, müssen wir die Bildanzeigegröße dynamisch ändern, um die Konsistenz der Bildgröße und die Koordination der Proportionen sicherzustellen. Durch die Suche können wir den jQuery-Code, der diese Funktion implementiert, wie folgt aus dem Internet finden. Dieser Code kann die Größe des Bildes innerhalb eines bestimmten Bereichs halten. Wenn die Originalgröße des Bildes größer als der maximale*-Wert ist, ist die Breite der angezeigten Bilder gleich.

Originalcode:

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

Ich verwende diese Schreibmethode auch in meinem JS-Code. Beim Testen der Wirkung auf verschiedenen Browsern wurde jedoch festgestellt, dass diese Schreibmethode nicht an den Chrome-Browser angepasst werden kann (Chrome-Versionsnummer ist 10.0.648.204) und einen Fehler verursacht, bei dem das Bild in seiner Originalgröße angezeigt wird. Später wurde der Code von $('.post img').each() mit der Methode $(window).load() umschlossen, wodurch das Problem der falschen Anzeige im Chrome-Browser gelöst wurde. Warum tritt also ein Fehler im Chrome-Browser auf und was ist der Unterschied zwischen $(document).ready und $(window).load?

Es stellt sich heraus, dass das Ereignis „Dokument bereit“ mit der Ausführung beginnt, wenn das HTML-Dokument geladen und das DOM bereit ist, auch wenn die Bildressourcen noch nicht geladen wurden. Das Fensterladeereignis wird etwas später ausgeführt. Es beginnt mit der Ausführung, nachdem die gesamte Seite, einschließlich Frames, Objekte und Bilder, geladen wurde. Anhand dieses Unterschieds können wir analysieren, dass die Ausführungsreihenfolge des js-Codes zum Laden von Bildern und zum dynamischen Ändern von Bildern ungewiss ist, wenn der Chrome-Browser die Methode $(window).load() nicht zum Verarbeiten von Bildern verwendet.

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

Das Obige ist der gesamte Inhalt des Artikels. Wenn er auf meiner Seite platziert wird, um die Höhe des Bildes zu ermitteln, wird ein Fehler gemeldet, der darauf hinweist, dass die Breitenmethode nicht bereitgestellt wird

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

Der geänderte Code lautet also wie folgt:

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

Mit dem obigen Inhalt teile ich Ihnen mit, wie Sie das Problem lösen können, dass jQuery die Bildgröße unter Google Chrome nicht ermitteln kann, und wie jQuery die Anzeigegröße des Bildes dynamisch ändert. Ich hoffe, es gefällt Ihnen und mir Ich hoffe auch, dass Freunde dieser Seite weiterhin Aufmerksamkeit schenken.