如何在页面加载后显示页面内容？

我的页面出现问题。我有很多内容需要在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

如何在页面加载后显示页面内容？

回答

相关问题