页面加载后如何显示页面内容？
页面加载后如何显示页面内容？
提问于 2012-09-19 03:15:55
我的页面上有个问题。我有很多内容要在jQuery表中显示给用户。然而，当页面加载时，表格将显示所有行，页面的长度将从10行变为10000行(以及分页)。
因此，我希望隐藏该表，直到它加载所有数据(可能会在其中放置一个加载图像)，当它加载后，我希望显示表及其加载的内容。
我该怎么做呢？
回答 4
Stack Overflow用户
发布于 2012-09-19 03:22:26
我通常将样式"display:none“应用于目标容器，然后您可以使用.load()函数并使用回调来显示填充了数据的容器。
基本上：
$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
$('#target').removeClass("loading-layer");
$('#target').show();
});编辑
今天上午，我尝试只在加载后显示datatable，您可以这样做：
<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>Stack Overflow用户
发布于 2012-09-19 03:21:34
您应该隐藏该表，以便它在开始时(甚至在加载时)不会被浏览器呈现：
<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)格式提供数据，这样可以加快加载速度，特别是在异步并行完成的情况下。
顺便说一句:你提到了分页--这比同时加载所有数据要好得多。
Stack Overflow用户
发布于 2012-09-19 04:00:37
http://jsfiddle.net/jklm313/hfUSg/1/在页面加载后，使用以下命令从主体中移除带有“display:none”的类：
$("window").load(function() {
$("body").removeClass("preload");
});对于禁用了javascript的浏览器：
<noscript>
<style>
.preloader {display: block;}
</style>
</noscript>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12483497
复制相关文章
相似问题
腾讯云开发者
