アニメーションをトリガする前に画像がロードされ、サイズが変更されるまで待つ？

Question

$("#body-background").ezBgResize(); 
$("#nav").animate({ 
     left: "-725px" 
    }, 800, "easeOutCirc"); 
    $("#page .home").animate({ 
      right: "0px" 
    }, 800, "easeOutCirc"); 

これは基本的に私のコードです。 （参照：http://johnpatrickgiven.com/jquery/background-resize/）

最初の行は、jQueryの簡単な背景リサイズ使用するHTMLで

を、あなたはこのような何か置く：

<!-- This gets positioned absolutely so place it anywhere. --> 
<div id="body-background"><img src="image/bg.jpg" alt="Bg"></div> 

を私がいる問題は、イメージがかかることです最初の時間を読み込むには長い間、アニメーションは起動せず...最後までスキップします。とにかく、サイズ変更が完了するまでアニメーションを遅らせることができますか？

ありがとうございます。

編集：私が働いているサイト：ちょうどjsFiddleで

// grab the background image object 
var img = $('#body-background img'); 

// next, create a new hidden image in the background and bind to the load event 
var nImg = $('<img>').bind('load',function(){ 
    // this is where your "After load" code would go 
}); 

// next, give the image the same URL of the image for the background 
// this will force the event to load up and call the load event 
nImg.attr('src',img.attr('src')); 

作品（：私は行うことができますhttp://jsc.yondershorecreative.com/

Answer 1

ベストのものは画像プリローダーをシミュレートし、それの負荷イベントを待つですイメージURLの?の後の番号を変更して空のキャッシュをシミュレートします）。それが役に立ったら教えてください。

---

更新（下記の解説）4.2メガバイトのPIC用

<script type="text/javascript"> 
    $('#body-background').azBgResize(); 

    var homepageAnimation = function(){ 
    $("#nav").animate({ 
     left: "-725px" 
    }, 800, "easeOutCirc"); 
    $("#page .home").animate({ 
     right: "0px" 
    }, 800, "easeOutCirc"); 
    } 
    $(window).load(function(){ 
    setTimeout(homepageAnimation,1000); 
    }); 
</script>