JavaScript/jQuery: Running DOM commands *after* img.onload commands
<p>I need to get the width &amp; height of a CSS background image and inject it into document.ready javascript. Something like:</p>

<pre><code>$(document).ready(function(){
  img = new Image();
  img.src = "images/tester.jpg";


  $('body').css('background', 'url(' + img.src + ')');
  $('body').css('background-size', img.width + 'px' + img.height + 'px');
});
</code></pre>

<p>The problem is, the image width and height aren't loaded in at the time of document.ready, so the values are blank. (They're accessible from console, but not before). </p>

<p><code>img.onload = function() { ... }</code> retrieves the width and height, but DOM <code>$(element)</code> calls aren't accessible from within img.onload.</p>

<p>In short, I'm a little rusty on my javascript, and can't figure out how to sync image params into the DOM. Any help appreciated</p>

<p>EDIT: jQuery version is 1.4.4, cannot be updated.</p>
