加載頁面顯示Ajax加載器gif

Question

我在頁面啟動時加載了一個基本內容 。 結合表，我正在使用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

如果我對您想要的東西沒錯，更確切地說，嘗試一下這種提琴 。

$(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>