加载页面显示 Ajax 加载器 gif答案

【问题标题】：Load page show Ajax loader gif加载页面显示 Ajax 加载器 gif
【发布时间】：2014-03-14 06:53:42
【问题描述】：

我有一个基本的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;
  });

【问题讨论】：

标签： javascript jquery

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：