加載頁面顯示Ajax loader gif

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>