Javascript 上传页面'；以增量方式添加内容（不必等到加载所有内容）_Javascript_Php_Jquery_Html_Server

Javascript 上传页面'；以增量方式添加内容（不必等到加载所有内容）

javascript php jquery html server

Javascript 上传页面'；以增量方式添加内容（不必等到加载所有内容）,javascript,php,jquery,html,server,Javascript,Php,Jquery,Html,Server,我有一个页面，显示10个不同的项目，每个项目需要一段时间来加载目前，该页面必须等待全部10个项目完全加载后才能显示该网页。我想知道，是否有可能在这些项目加载后立即在网页上显示它们？而不必等待其余部分完全加载一个数组包含所有的10个项目，通过迭代，每个项目都会显示出来（注意：假设显示这些项目，即加载它们需要一段时间）这只是一个简单的场景，可以让大家了解这个想法： <html> <body> <?php $array = array("item1", "i

我有一个页面，显示10个不同的项目，每个项目需要一段时间来加载

目前，该页面必须等待全部10个项目完全加载后才能显示该网页。我想知道，是否有可能在这些项目加载后立即在网页上显示它们？而不必等待其余部分完全加载

一个数组包含所有的10个项目，通过迭代，每个项目都会显示出来（注意：假设显示这些项目，即加载它们需要一段时间）这只是一个简单的场景，可以让大家了解这个想法：

<html>
<body>
<?php

$array = array("item1", "item2", "item3", "item4","item5", "item6", "item7", "item8","item9", "item10");

foreach ($array as $value) {
    // Here..do calculations (which is time-consuming and must be done using php) before building the HTML for each item/value in the array
    echo "<div class='display'>";
    echo "<h1>".$value."</h1>";
    echo "</div>";
    }
?>
</body>
</html>


您可以加载不带项目的页面，并使用jquery加载每个项目
$(document).ready(function() {
     //iterate through array and load each item one by one
});

或
由于您要对每个项目进行大量计算，因此最好将此代码移动到javascript。PHP是一个预处理器，因此如果您在HTML中使用它，则必须在页面呈现之前完成所有工作
首先，用一个空容器创建页面，其中包含条目。这将允许页面立即加载，而无需等待条目处理
接下来，您需要收集条目的数据。如果数据来自数据库，则编写一个PHP服务，返回要加载的一系列条目的数据。从jQuery调用PHP服务并用响应填充javascript数组。如果数据是静态的，并且不是来自数据库，那么您可以自己编写JS数组
拥有数据数组后，可以启动一个循环来遍历每个数组并对其进行处理，然后使用jQuery将其附加到HTML中
这样，用户可以立即获得页面加载，您的条目将在可用时显示出来。给用户提供某种加载微调器，以向用户指示即将发生的事情，这也是一个好主意。如果您需要在不中断用户体验的情况下检索其他条目，此方法还允许您从jQuery重新使用PHP服务。试一试怎么样？有一些黑客可以让类似的东西工作，但应该避免。PHP是一个预处理器，这意味着它所做的所有工作都是在HTML实际显示之前完成的。当向这样的页面加载重项时，应该使用ajax/jQuery和PHP服务异步完成。为了找到解决方案，我需要知道哪一部分需要很长时间？为什么加载每个项目需要很长时间？换句话说，检索该项目的数据是否需要很长时间？还是构建HTML并显示它需要很长时间？@JamesWiley构建这些项目根本不需要花很多时间。然而，在每次迭代过程中，在构建HTML并显示它之前，我对每个项目所做的计算需要花费时间。也许我应该在我的代码中强调这一点，我只是这么做了，希望现在这会更有意义
$(window).load(function() {
    //iterate through array and load each item one by one
})