Google Chrome_jqueryでjqueryが画像のサイズを取得できない問題の解決方法-jsチュートリアル-php.cn

Google Chrome_jqueryでjqueryが画像のサイズを取得できない問題の解決方法

WBOY

リリース： 2016-05-16 15:39:51

オリジナル

1196 人が閲覧しました

コードは次のとおりです:

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

ログイン後にコピー

上記のコードは IE や Firefox では問題ありませんが、Google では問題が発生する可能性があります。サイズが切れているのは画像が読み込まれていないためです。

変更方法は以下のとおりです。

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

ログイン後にコピー

まだ時間があるのでシェアします jQueryで画像の表示サイズを動的に変更する方法詳細は以下の通りです。

背景から送信されるサイズの異なる複数の画像を表示したい場合、画像サイズの一貫性と比率の調整を保証するために、画像の表示サイズを動的に変更する必要があります。検索すると、この機能を実装した jQuery コードが次のようにインターネットから見つかります。このコードは、画像のサイズを特定の範囲内に保つことができます。画像の元のサイズが max* 値よりも大きい場合、表示される画像の幅は等しくなります。

元のコード:

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

ログイン後にコピー

私も JS コードでこの書き方を使用しています。しかし、さまざまなブラウザで効果をテストしたところ、Chromeブラウザ（Chromeのバージョン番号は10.0.648.204）ではこの書き方が適応できず、画像が元のサイズで表示されてしまうバグが発生することが判明しました。その後、$('.post img').each() のコードが $(window).load() メソッドでラップされ、Chrome ブラウザで正しく表示されない問題が解決されました。では、なぜ Chrome ブラウザでバグが発生するのでしょうか?また、$(document).ready と $(window).load の違いは何でしょうか?

画像リソースがまだ読み込まれていない場合でも、HTML ドキュメントが読み込まれ、DOM の準備ができたときに、ドキュメント準備完了イベントの実行が開始されることがわかりました。ウィンドウのロードイベントは、フレーム、オブジェクト、画像を含むページ全体が読み込まれてから少し遅れて実行されます。この違いから、Chrome ブラウザが $(window).load() メソッドを使用して画像を処理しない場合、画像の読み込みや画像の動的変更を行う js コードの実行順序が不確実であると分析できます。

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

上記が記事の全内容です。上記のコードをマイページに配置して画像の高さを取得すると、widthメソッドが提供されていない旨のエラーが報告されます。

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

ログイン後にコピー

変更されたコードは次のようになります:

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

ログイン後にコピー

上記の内容は、Google Chrome で jQuery が画像のサイズを取得できない問題を解決する方法と、jQuery が画像の表示サイズを動的に変更する方法を共有するものです。気に入っていただければ幸いです。また、お友達が今後もこのサイトに注目してくれることを願っています。ありがとうございます。