how to wait for image load before querying with jQuery
<p>Example: <a href="http://jsfiddle.net/forgetcolor/rZSCg/3/" rel="nofollow">http://jsfiddle.net/forgetcolor/rZSCg/3/</a></p>

<p>Given a div set to overflow:auto, that will (likely) contain an image larger than its window, I'm trying to figure out a way to wait for that image to load before querying its properties.  The property I'm after is it's inner width, minus its scrollbar.  Thanks to a previous stackoverflow question (http://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar) I've got a technique to do it, but this only works with a small tiny image, or one in the cache.  When it gets a large image, the code that does the query executes before the image is done loading.</p>

<p>What I want is a way to wait for that image to load before doing the query.  Any ideas?</p>

<p>Full example: <a href="http://jsfiddle.net/forgetcolor/rZSCg/3/" rel="nofollow">http://jsfiddle.net/forgetcolor/rZSCg/3/</a></p>

<p>Javascript:</p>

<pre><code>// using a random appended to the URL to simulate non-cached
// varying images
var r = Math.floor((Math.random()*100000)+1);
$('#box1').html("&lt;img src='http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?"+r+"' /&gt;");
var helperDiv = $('&lt;div /&gt;');
$('#box1').append(helperDiv);
$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();
</code></pre>
