Using jQuery to perform actions in sequence

Question

I am using the fullscreenr jQuery plugin on my page. First, I hide the image, then I run fullscreenr on it using the waitforimage plugin, and then finally I use fadeIn to display it:

<img id="bgimg" style="display: none;" src="<?php bloginfo('template_url')?>/images/backgrounds/<?php echo $imageData['location']; ?>" />

<script type="text/javascript">
    $bg = $('#bgimg');
    $bg.hide();
    var FullscreenrOptions = {  width: <?php echo $imageData['width']; ?>, height: <?php echo $imageData['height']; ?>, bgID: '#bgimg' };
    $bg.waitForImages(jQuery.fn.fullscreenr(FullscreenrOptions));
    $bg.fadeIn(2500);
</script>

My problem is that somehow, something isn't working quite right. This works fine on my dev box, but when I try to load the page on the web, the fadeIn starts before the image is fully loaded.

I tried adding a callback to the fullscreenr function, but it had the same results. What can I do to ensure that it works properly? I also tried using $bg.load() to load fullscreenr and again, no luck.

Thanks!

Answer 1

When you have nested function calls like function2(function1(whatever)) the inner function will be executed first and then the outer function. So in your case the fullscreenr() call will be applied BEFORE waitForImages ... and that would explain the behavior.

On second glimpse I guess that this is what you wanted to do

$bg.waitForImages(function() {jQuery.fn.fullscreenr(FullscreenrOptions)});