如何在頁面加載後顯示頁面內容？

我的頁面出現問題。我有很多內容需要在jQuery表格中顯示給用戶。然而，當頁面加載時，表格顯示所有行，頁面將變成10000行而不是10（和分頁）。如何在頁面加載後顯示頁面內容？

所以我想隱藏表，直到它加載所有的數據（也許把一個加載圖像那裏），並且當它已經加載，我想顯示它的加載內容的表。

我該怎麼做？

來源

2012-09-18 user1406071

參見[問]。和http://www.whathaveyoutried.com/ – mtk

http://datatables.net/ - 表插件，可以做你想要的/想要 –

說實話，我實際上使用數據表。但我希望它隱藏起來，直到頁面加載完畢。 – user1406071

您應該隱藏表，以便它不是由瀏覽器在開始渲染（或者甚至在加載）：

<table id="data" style="display:none;">

（請注意，這使你的網頁無法使用非JS的用戶，也許下面會更好：

<script type="text/javascript"><![CDATA[ 
    document.write("<style>hidden { display:none; }</style>"); 
]]></script> 
<table id="data" class="hidden">

然後，一旦表被加載（onDOMready），您可以動態地刪除一些列，並顯示之後的其餘部分：

$(document).ready(function() { 
// wait for images and other included objects to load, use 
// $(window).load(function() { 
    var table = $("#data"); 
    table.startPageViewer(); // or whatever 

    table.show(); 
    // or, respectively: 
    table.removeClass("hidden"); 
});

您也可以動態創建整個表格，並以較短的（非HTML）格式提供數據以加載加載，特別是在並行執行異步時。

順便說一句：你提到的分頁 - 這會比在同一時間加載所有的數據好得多。

來源

2012-09-18 19:21:33 Bergi

它已經完成。以及如何在頁面加載時顯示它？這是我的問題其實。 – user1406071

我想試試這些，但我的主機剛拿到了下來... OMG – user1406071

是的，但它是一個分頁表實際上：/我不能編輯它，因爲它的JS並沒有什麼做用PHP。它不幸的加載所有的數據 – user1406071

我通常將樣式「display：none」應用於目標容器，然後可以使用.load（）函數並使用回調來顯示充滿數據的容器。

基本上是：

$('#target').hide(); 
$('#target').addClass("loading-layer"); 
$('#target').load('toto.php',function(){ 
    $('#target').removeClass("loading-layer"); 
    $('#target').show(); 
});

編輯

我剛纔想今天上午只加載後顯示一個數據表，你可以做到這一點的方法：

<div id="data-container" class="hidden"> 
     <table id="table-courses" cellpadding="0" cellspacing="0" border="0" class="display ex_highlight data-table table-font" > 
      ... 
     </table> 
    </div> 

<script type="text/javascript"> 
    $(document).ready(function() {   
     $('#data-container').show(); 
     //Data table creation  
     oTable = $('#my-table').dataTable({      
      "bJQueryUI": true 
     }); 
    }); 
</script>

來源

2012-09-18 19:22:26 sdespont

這只是不適合我：/ – user1406071

什麼不行？你的容器不包含你的數據？ – sdespont

我有一個包含表格的DIV（它的ID是：list）。這裏是我的代碼，我所做的： $（「＃列表」）隱藏（）; $（ '＃列表'）負載。（ 'pointlist.php'，函數（）{ $（ '＃列表'）顯示（）; }）; 所以我實際上只是將它添加到我的代碼中，但它不工作。 – user1406071

http://jsfiddle.net/jklm313/hfUSg/1/ 使用以下命令從正文刪除「display：none」類：

$("window").load(function() { 
    $("body").removeClass("preload"); 
});

至於禁用JavaScript的瀏覽器：

<noscript> 
    <style>   
     .preloader {display: block;} 
    </style> 
</noscript>

來源

2012-09-18 20:00:36 carpenumidium

我猜你被困在FOUC（無樣式內容的閃存）

克服這種的典型方式是設置DIV包含您表爲

知名度：隱藏;而DOM還是會被瀏覽器處理，一旦在

文件準備完成取消隱藏你的背DIV

$('#customtabs').css('visibility','visible');

你可以看到這個example

來源

2012-09-18 20:12:04 sayannayas

如何在頁面加載後顯示頁面內容？

回答

相關問題