加载页面显示Ajax加载器gif

Question

I have a basic footable that I am loading on page startup. In combination with the table I am using an ajax loader to display. The ajax loader will display and the table will remain hidden till the page is fully loaded. Once page fully loaded the table will show and the ajax loader will hide. I am having a little luck in getting the procedure correct. The table is not hiding and the loading gif is showing up incorrectly. JSFIDDLE

$(window).load(function(){
    var toLoad = $('table');
    $('table').hide('fast',loadTable);
    $('#load').remove();
    $('#output').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadTable() {
      $('table').load(toLoad,'',showNewTable())
    }
    function showNewTable() {
      $('table').show('normal',hideLoader());
    }
    function hideLoader() {
      $('#load').fadeOut('normal');
    }
    return false;
  });

Answer 1

Hi I try to provide some example.... you can try this

$(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
});

Or you can view here... http://jsfiddle.net/zylar23/DLpaf/

Answer 2

Try this fiddle , if I'm not wrong about what you want to go for, more precisely;

$(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;
});

And some changes to the 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>