为什么我的Preloader几乎不能在FF中运行而在Chrome中根本没有？

Question

现在每个人的问题可能会有所不同，但是在Firefox中 - 除非您刷新浏览器，否则加载完成并且加载div不会消失。在chrome中，负载永远不会消失。我没有IE，所以我不确定那里会发生什么可怕的事情。

我的代码细分：

• A，B 预加载并设置2个背景
• C 在容纳所有内容的容器窗口中加载
• 加载一些内容（ D ），并在内部加载更多内容（ E ） 内容（的 d ）
• F 预加载 Div顶部淡出
• G 预装了背景的Div（ A ）淡入
• H 淡入包含容器（ C ）和所有内容（ D ）的DIV， 电子）
• 我对functions.js
中的表格进行一些小的初始设置

Here is what it looks like

这是代码： 我将评论信放在右侧

    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

感谢大家的帮助:)）

Answer 1

在 $img2加载后，您只需为$img1 添加加载。同时添加它们并进行最后的回调检查以确定它们都已加载，例如：

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
}