Question

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

This is essentially my code.

The first line uses jQuery Easy Background Resize: (ref: http://johnpatrickgiven.com/jquery/background-resize/)

In the HTML, you put something like this:

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

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?

Thanks in advance.

Edit: The site I’m working on: http://jsc.yondershorecreative.com/

Answer 1

Best thing I can do is simulate the image preloader and wait for the load event of it:

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

Works in jsFiddle (Just change the number after the ? in the image URL to simulate emptying cache). Let me know if that helps.

---

Update (Given commentary below)

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