title: Wait till image is loaded and resized before triggering animation?
body: <pre><code>$("#body-background").ezBgResize();
  $("#nav").animate({
          left: "-725px"
      }, 800, "easeOutCirc" );
      $("#page .home").animate({
              right: "0px"
      }, 800, "easeOutCirc" );
  </code></pre>
  
  <p>This is essentially my code.  </p>
  
  <p>The first line uses jQuery Easy Background Resize: (ref: <a href="http://johnpatrickgiven.com/jquery/background-resize/" rel="nofollow">http://johnpatrickgiven.com/jquery/background-resize/</a>)</p>
  
  <p>In the HTML, you put something like this:</p>
  
  <pre><code>&lt;!-- This gets positioned absolutely so place it anywhere. --&gt;
  &lt;div id="body-background"&gt;&lt;img src="image/bg.jpg" alt="Bg"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem I'm having is that the image takes so long to load the first time, the animations don't fire...and skip to the end. Anyway I can delay the animation till after the resize is complete?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Edit: The site I'm working on: <a href="http://jsc.yondershorecreative.com/" rel="nofollow">http://jsc.yondershorecreative.com/</a></p>