Delay jQuery animation until the background image is displayed by Supersized plugin

People asked similar questions before, but mine is with a twist:

I'm using Supersized jQuery plugin to load a single full-screen background image. The code loading the image is this:

<script type="text/javascript">  

            jQuery(document).ready(function($) {

                $.supersized({
                    //Background image
                    slides  :  [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]                  
                });

$('#content').delay(3500).fadeIn(600);

            });


        </scr开发者_如何学JAVAipt>

As you can see in the code, I chained the fadeIn effect after the "supersized" function. I want to fade in the #content div after the background image (bg.jpg) not just finished loading but also finished fading in. I used the solution I don't particularly like: setting a long delay before my fadeIn effect.

What would be the best way to fade in the content div after Supersized image finihsed fading in?

Would be grateful for your help!

If anyone is still looking for a solution, here's what I did:

Supersized.3.2.7.js

Right after the img.load function, within the base._start function, I added the following:

img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });

Found my own answer:

the solution is to edit the supersized core js file. In the file, after this bit of code:

$('#supersized-loader').hide();     //Hide loading animation
element.fadeIn('fast');         //Fade in background
resizenow();

I added my own line:

$('#content').delay('fast').fadeIn('fast');

Worked like magic!

Have you tried using the jQuery .ready() function?

jQuery(document).ready(function($) {
  $.supersized({
    //Background image
    slides  :  [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]                  
  });

  $.supersized.ready( function() {
    $('#content').fadeIn(600);
  });

});