在触发动画之前等待图像加载并调整大小？

Question

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

这实质上是我的代码。

第一行使用jQuery的简单背景调整大小：（参考：http://johnpatrickgiven.com/jquery/background-resize/）

在HTML，你把这样的事情：

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

我遇到的问题是图像取只要第一次加载，动画就不会触发......并跳到最后。无论如何，我可以延迟动画，直到调整大小完成后？

在此先感谢。

编辑：http://jsc.yondershorecreative.com/

Answer 1

我能做的最好的事情是模拟图像预加载，等待它的负载事件：

// 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')); 

作品在jsFiddle（只是我工作的网站更改图像URL中的?之后的数字以模拟清空缓存）。让我知道这是否有帮助。

---

更新（下面给出的评论）

<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>