jqueryのjavascriptイメージのサイズ変更

Question

特定の幅に合わせるためにイメージを動的にサイズ変更するスクリプトがありました。here私は自分のWebアプリケーションのためにそれを修正し、それは時間の大きな部分で動作しますが、何らかの理由で関数がランダムに画像がより大きな幅を持つときにif文をトリガーしない場合があります。 。私はタイムアウトがブラウザに画像を読む時間を与えることを望むセットタイムアウトを入れた。しかし、それはなぜトリガしないだろうということについては何の考えも運がない？

サイドノート：これはモバイルウェブアプリ向けです。使用できるHTML5がありますか？

 var maxWidth = 200; 
    var imgWidth = $('#locImg').width(); 
    console.log(imgWidth); 
    setTimeout(function() { 
     if(imgWidth > maxWidth) { 
      newWidth = maxWidth; 
      var newHeight = $('#locImg').height()/($('#locImg').width()/maxWidth); 
      $('#locImg').height(newHeight).width(newWidth); 
      console.log($('#locImg').width()); 
      $('#loc').css('visibility','visible'); 
     } 
     else { 
      $('#loc').css('visibility','visible'); 
     } 
     },750); 

Answer 1

あなたは画像を確認するために、このようなものを使用することができ、完全にロードされます。

var maxWidth = 200; 
var imgWidth = $('#locImg').width(); 
var image = new Image(); 
image.src = $('#locImg').attr("src"); 

image.onload = (function() { 
    if(imgWidth > maxWidth) { 
     newWidth = maxWidth; 
     var newHeight = $('#locImg').height()/($('#locImg').width()/maxWidth); 
     $('#locImg').height(newHeight).width(newWidth); 
     console.log($('#locImg').width()); 
     $('#loc').css('visibility','visible'); 
    } 
    else { 
     $('#loc').css('visibility','visible'); 
    } 
    }); 

イメージが完全にロードされた後、それが唯一のサイズ変更を開始し、この方法。