title: Javascript: get image size
body: <p>I cant get correct size for image</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;img id="image" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
      height="20"&gt;
  
  
  &lt;div id="result"&gt;&lt;/div&gt;
  correct result: 76 
  </code></pre>
  
  <p>And the javascript:</p>
  
  <pre><code>var v1 = $('#image').height();
  var v2 = $('#image').removeAttr('height').height();
  var i =  $('&lt;img&gt;').attr('src',  $('#image').attr('src'));
  var v3 = i.height()
  
  i.one('load', function() {
      var v4 = $(this).height();
      $('#result').text(v1 + " " + v2 + " " + v3 + " " + v4);
  }).each(function() {
      if(this.complete) {
          $(this).load();
      }
  });
  </code></pre>
  
  <p>I used 4 methods, and all of them failed.<br>
  <strong>Updated:</strong> method 2 works, but I want to use method 4 because image may be not loaded at the moment of script execution.</p>
  
  <p>Testing link: <a href="http://jsfiddle.net/cMZK7/7/" rel="nofollow">http://jsfiddle.net/cMZK7/7/</a></p>