gpt4 book ai didi

javascript - HTML、JQuery分离加载div

转载 作者:行者123 更新时间:2023-11-28 07:34:07 26 4
gpt4 key购买 nike

我目前有一个加载缓慢的页面,我想让用户体验更愉快。我想加载每个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com