Question

我在页面启动时加载了一个基本的footable。结合表我使用ajax加载器来显示。将显示ajax加载程序，表将保持隐藏状态，直到页面完全加载。页面完全加载后，表格将显示，ajax加载程序将隐藏。我有一点运气让程序正确。该表未隐藏，并且加载的gif显示不正确。 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

您好我尝试提供一些示例....您可以试试这个

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

或者你可以在这里查看... http://jsfiddle.net/zylar23/DLpaf/

Answer 2

尝试this fiddle，如果我对你想要的东西没有错，更确切地说;

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

对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>

加载页面显示Ajax加载器gif

2 个答案: