title: Why loading naturalWidth of an image returns the width of previously uploaded image?
body: <p>I have successfully showed a preview of an uploaded image. Now I need to know its <code>naturalWidth</code>.</p>
  <p>However, when I access the <code>naturalWidth</code> of my image it returns the width of the previously uploaded image.</p>
  <p>E.g: first uploaded image has a width of 100, second image has 200 width. When I upload the first image, the alerted value is 0. When I upload the second image the value is 100.</p>
  <p>Here is a part of my code.</p>
  <pre><code>var reader = new FileReader();
  reader.onload = function(e) {
      $('#img').css(&quot;display&quot;, &quot;block&quot;).attr('src', e.target.result);
      var width = document.querySelector('#img').naturalWidth;
      alert(width);
  };
  reader.readAsDataURL(event.target.files[0]);
  </code></pre>