Javascript 加载页面显示Ajax加载程序gif

我有一个基本的，我在页面启动加载。结合表，我使用ajax加载程序来显示。ajax加载程序将显示，并且在页面完全加载之前，表将保持隐藏状态。页面完全加载后，表将显示，ajax加载程序将隐藏。我有点运气把手术做对了。表未隐藏，加载的gif显示不正确

$（窗口）.load（函数（）{
var toLoad=$（“表”）；
$（'table'）.hide（'fast'，loadTable）；
$（“#加载”）.remove（）；
$（'输出'）.append（'加载…'）；
$（'加载'）.fadeIn（'正常'）；
函数loadTable（）{
$（'table'）.load（toLoad'，，showNewTable（））
}
函数showNewTable（）{
$（'table'）.show（'normal'，hideLoader（））；
}
函数hideLoader（）{
$（'加载'）.fadeOut（'正常'）；
}
返回false；
});

嗨，我试着提供一些例子。。。。你可以试试这个

$(window).load(function () {
        $('#output').append('<span id="load">LOADING...</span>');
        $('.footable').hide();

    setTimeout(function(){
        $('#load').fadeOut('normal');      
        $('.footable').fadeIn('normal');
        $('.footable').footable();
    }, 5000); //Timeout 5 seconds
});

$（窗口）。加载（函数（）{
$（'输出'）.append（'加载…'）；
$（'.footable'）.hide（）；
setTimeout（函数（）{
$（'加载'）.fadeOut（'正常'）；
$（'.footable'）.fadeIn（'normal'）；
$（'.footable'）.footable（）；
}，5000）；//超时5秒
});

或者你可以在这里查看

试一下，如果我对你想要的东西没有错的话，更准确地说

$(document).ready(function () {
    $('.footable').footable();
    var toLoad = $('table');
    // $('table').hide('fast', loadTable);
    $('span#load').hide();
    // $('#output').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    loadTable();

    function loadTable() {
        $('table').load(toLoad, '', showNewTable())
    }

    function showNewTable() {
        $('table').show('normal', hideLoader());
    }

    function hideLoader() {
        $('#load').slideUp('fast');
    }
    return false;
});

$（文档）.ready（函数（）{
$（'.footable'）.footable（）；
var toLoad=$（“表”）；
//$（'table'）.hide（'fast'，loadTable）；
$（'span#load'）.hide（）；
//$（'输出'）.append（'加载…'）；
$（'加载'）.fadeIn（'正常'）；
loadTable（）；
函数loadTable（）{
$（'table'）.load（toLoad'，，showNewTable（））
}
函数showNewTable（）{
$（'table'）.show（'normal'，hideLoader（））；
}
函数hideLoader（）{
$（'加载'）.slideUp（'快速'）；
}
返回false；
});

以及对HTML的一些更改

<div id="output">
    <span id="load">Loading…</span>
    <table class="footable" style="display:none;">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th data-hide="phone, tablet">Head 3</th>
                <th data-hide="phone, tablet">Head 4</th>
                <th data-hide="phone, tablet">Head 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content 1</td>
                <td>Content 2</td>
                <td>Content 3</td>
                <td>Content 4</td>
                <td>Content 5</td>
            </tr>
            <tr>
                <td>Content 6</td>
                <td>Content 7</td>
                <td>Content 8</td>
                <td>Content 9</td>
                <td>Content 10</td>
            </tr>
            <tr>
                <td>Content 11</td>
                <td>Content 12</td>
                <td>Content 13</td>
                <td>Content 14</td>
                <td>Content 15</td>
            </tr>
            <tr>
                <td>Content 16</td>
                <td>Content 17</td>
                <td>Content 18</td>
                <td>Content 19</td>
                <td>Content 20</td>
            </tr>
        </tbody>
    </table>
</div>

加载…
总目1
总目2
总目3
总目4
总目5
内容1
内容2
内容3
内容4
内容5
内容6
内容7
内容8
内容9
内容10
内容11
内容12
内容13
内容14
内容15
内容16
内容17
内容18
内容19
内容20

<div id="output">
    <span id="load">Loading…</span>
    <table class="footable" style="display:none;">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th data-hide="phone, tablet">Head 3</th>
                <th data-hide="phone, tablet">Head 4</th>
                <th data-hide="phone, tablet">Head 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Content 1</td>
                <td>Content 2</td>
                <td>Content 3</td>
                <td>Content 4</td>
                <td>Content 5</td>
            </tr>
            <tr>
                <td>Content 6</td>
                <td>Content 7</td>
                <td>Content 8</td>
                <td>Content 9</td>
                <td>Content 10</td>
            </tr>
            <tr>
                <td>Content 11</td>
                <td>Content 12</td>
                <td>Content 13</td>
                <td>Content 14</td>
                <td>Content 15</td>
            </tr>
            <tr>
                <td>Content 16</td>
                <td>Content 17</td>
                <td>Content 18</td>
                <td>Content 19</td>
                <td>Content 20</td>
            </tr>
        </tbody>
    </table>
</div>