Question

Now the problems might be different for everyone, however in Firefox – the loading finishes and the load div doesn’t disappear unless you refresh the browser. In chrome, the load never disappears. I don’t have IE so I’m not sure what scary things happen there.

A breakdown of my code:

• A,B Preload and set 2 backgrounds
• C Load in a container window which will house all content
• Load some content(D), and load more content(E) inside inside
  content(D)
• F Preload Div on top fades out
• G Div with preloaded background(A) fades in
• H Fade in a DIV which contains container(C) and all content(D,
  E)
• I Do some minor initial setup to tables in functions.js

Here is what it looks like

And here’s the code:
I put the comment letters on the right-hand side

    var  src1 = 'img/map_bg_1680.jpg'                                                              //A
    , $img1 = $( '<img src="' + src1 + '">' );                                                   //A

    var  src2 = 'img/menu-background.png'                                                          //B
    , $img2 = $( '<img src="' + src2 + '">' );                                                   //B


$img1.bind( 'load', function(){                                                                 //A
    $( '#bgDiv' ).css( 'background-image', 'url( ' + src1 + ')' );                                  //A

        $img2.bind( 'load', function(){                                                         //B

            jQuery('#main-content-fiftyfive').load('index2.html', function() {                     //C
                jQuery( '#viewport-container' ).css( 'background-image', 'url( ' + src2 + ')' );   //A

                $('#right-content').load('partytool.html', function() {                         //D
                    $('#whole-ajax-content-one').load('events.html', function() {                   //E
                        $( '.preloader' ).fadeOut('slow', function() {                              //F
                            $( '#bgDiv' ).fadeIn('slow', function() {                               //G
                                $( '#table-holder' ).fadeIn('slow', function() {                    //H
                                initialConfig();                                                   //I
                        });
                    });
                });
            });     
        });
    });
} );
} );
if( $img1[0].width ){ $img1.trigger( 'load' ); }                                                     //A
if( $img2[0].width ){ $img2.trigger( 'load' ); }                                                     //B

Thanks for your help everyone :))

Answer 1

You’re only adding the load for $img2 after $img1 has loaded. Add them at the same time and have your final callback check to see that both are loaded, e.g.:

var img1loaded = false
  , img2loaded = false;

$img1.bind( 'load', function(){
    img1loaded = true;
    finish();
} );

$img2.bind( 'load', function(){
    img2loaded = true;
    finish();
} );

function finish(){
    if( !img1loaded || !img2loaded ){ return; }
    // both are loaded
}