我目前有一个加载缓慢的页面，我想让用户体验更愉快。我想加载每个 div，所以当一个 div 是 read() 时，使用 jQuery 淡入淡出。目前我的代码有效，但它同时加载所有内容并淡入。我希望它按 div 放置顺序加载。下面是加载 2 个包含大表格的 div 的示例代码。我希望每张 table 都准备好后立即出现。第一个应该在第二个之前准备好，并且应该首先渲染。我试图将 js 分开，以便每个都有自己的 ready() 但这没有用。
此外:我更希望获得关于如何执行此操作的同意，而不是特定代码。如果我有很多 div 和很多不同的表怎么办。不是每个 div 都会有一个表。有些可能有图片或只有文字。应该有一种方法可以在每个 div 准备好显示时加载它。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<title>Animated jQuery Fade | Script tutorial</title>
</head>
<script>
$(document).ready(function(){
$('.myTable').DataTable();
});
$(document).ready(function(){$(".content").hide().fadeIn(1000);});
</script>
<body>
<div id="header">
<h1>Welcome to test page</h1>
</div>
<div class="content" style="display: none;">
<table class="myTable">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<?php for($i =0; $i <10000; $i++){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="content" style="display: none;">
<table class="myTable">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<?php for($i =0; $i <20000; $i++){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>
最佳答案
我认为您在这里需要的是为 DataTables 提供一个 AJAX 源，它将检索您的数据。然后设置一个回调，当数据加载到 fadeIn 表时将触发。
它可能看起来像这样:
$(document).ready(function() {
$('#myTable1').dataTable( {
"ajax"{
"url": 'path/to/datasource.php',
"success" : function(){
$('#myTable1').parent().fadeIn(1000);
}
}
} );
} );
这是未经测试的代码，语法可能有误，但它应该能让您了解这是如何完成的。此外，从您的 php 数据源返回的数据必须以 DataTables 期望的正确格式返回 json(这非常重要，并且经常是人们犯错误的地方)。
请参阅 DataTables ajax 文档 here .
关于javascript - HTML、JQuery分离加载div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31343800/