Javascript/Fancybox Error?

On my page I have 6 boxes below a main image that uses JS to have a nice fade in effect. On this page I also have Fancybox Load at the start of the page (using onload) to show an image that the user needs to see.

The issue is when the user first loads the page one of the boxes will barely show here is a screenshot of the issue: http://screencast.com/t/ROU61nMSgzy

The question is how do I resolve this so this issue does not happen? Note: Once the page is cached this issue does not happen.

Here is the JS for the boxes:

var $j = jQuery.noConflict();

$j(document).ready(function(){
Engine.Initialize();
if( !$j('body').hasClass('index') && !$j('body').hasClass('homepage') ) {
}
});

var Engine = {

Initialize: function() {
    Engine.Homepage_Animation();
},

Homepage_Animation: function() {
    if( !$j.browser.msie ) {
        $j('#homepage-main-item img').hide().fadeIn(700, function(){
            $j(this).css('display', 'block');

            $j('#homepage-boxes .boxes').each(function(i) {
                $j(this).delay(100 * i).animate({
                    opacity: 1
                }, 300);
            });
        });

    } else {
        $j('#homepage-main-item img').css('display', 'block');
        $j('#homepage-boxes .boxes').css('opacity', 1);
    }
},

}

Here is the JS for the Fancybox.

     <script type="text/javascript" >
     var $j = jQuery.noConflict();
$j(document).ready(function(){
 $j("#start").fancybox({
 'padding' : 0
 });
});
</script>

HTML for Fancybox

    <div class="hide">
    <img src="/Images/skin/spacer1x1.png" onload="$j('#start').trigger('click');" />  
<a href="#welcome" id="start"></a>
    <img id="welcome" usemap="#Map" alt="PL开发者_开发知识库EASE VIEW PAGE WITH IMAGES ON" src="/Images/start/start.png" />
    <map id="Map" name="Map">
    <area alt="See Message Examples" href="/artistphotos/" coords="29,431,301,465" shape="rect" />
    <area alt="Enter Site" href="javascript:$j.fn.fancybox.close();" coords="436,433,567,464" shape="rect" />
    </map>
</div> 

Thanks for any help =>

If you want fancybox to run first, use the fancybox onComplete callback:

$j(document).ready(function(){
    $j('#start').fancybox({

        'onComplete': function () {
            Engine.Initialize();
        }

    });
});

otherwise, put the fancybox code in after calling your custom init function:

$j(document).ready(function(){
    Engine.Initialize();

    $j("#start").fancybox({
        'padding' : 0
    });
});