JQuery-クラスを持つimg要素ごとにCSSを追加します。

Question

$(document).ready(function() { 
    $("img.resizeImage").each(function(){ 
     var img = $(this); 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 
     // alert("give image size ....."+width+", "+height); 
     var pic_real_width, pic_real_height; 
     $("<img/>").attr("src", $(img).attr("src")) 
      .load(function() { 
       pic_real_width = this.width; 
       pic_real_height = this.height; 

      }); 

     if(pic_real_width < width ){ 
      //alert("display original width.sssss 103.."); 
      $(this).removeAttr("width"); 
      $(this).css("width",pic_real_width); 
     } 

     if(pic_real_height < height){ 
      //alert("display original height ss.102.."); 
      $(this).removeAttr("height"); 
      $(this).css("height",pic_real_height); 
     } 
    }); 
}); 

上記のjquery実行フローは、条件が満たされていれば最後にヒットしません。私は望む結果を得ていません。私は2つのif（）の上にいくつかの警告を維持すると、実行フローは2つのif条件の中に入ります。 plは私を助けます。 jquery文を行単位で実行するにはどうすればいいですか？

Answer 1

画像のロードは非同期です。つまり、.loadコールバックは直ちに呼び出されません。

したがって、pic_real_widthとpic_real_heightは、使用しようとする時点で不明です。

をコールバック関数に移動する必要がありますか？