逐步上传页面的内容（不必等到所有内容都加载完毕）答案

【问题标题】：Upload page's content incrementally (not having to wait until all content is loaded)逐步上传页面的内容（不必等到所有内容都加载完毕）
【发布时间】：2016-02-21 17:13:07
【问题描述】：

我有一个显示 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>

换句话说，是否可以显示网页，并在收到内容后立即对其进行更新？

【问题讨论】：

试试this solution怎么样？
有一些技巧可以让这样的事情发挥作用，但应该避免它们。 PHP 是一个预处理器，这意味着它所做的所有工作都是在实际显示 HTML 之前完成的。当将繁重的项目加载到这样的页面中时，应该使用 ajax/jQuery 和 PHP 服务异步完成。为了想出一个解决方案，我需要知道哪个部分需要很长时间？为什么每个项目都需要很长时间才能加载？
换句话说，检索该项目的数据是否需要很长时间？还是构建 HTML 并显示它需要很长时间？
@JamesWiley 构建这些项目根本不需要太多时间。然而，花费时间的是我在每次迭代期间对每个项目进行的计算，就在构建 HTML 并显示它之前。也许我应该在我的代码中强调这一点，我刚刚做了，希望现在更有意义

标签： javascript php jquery html server

【解决方案1】：

由于您要对每个项目进行大量计算，因此最好将此代码移至 javascript。 PHP 是一个预处理器，所以如果你在 HTML 中使用它，它的所有工作都必须在页面呈现之前完成。

首先，使用一个空容器创建您的页面，条目将存放在该容器中。这将允许页面立即加载，而无需等待条目处理。

接下来，您需要为条目收集数据。如果数据来自数据库，请编写一个 PHP 服务，该服务返回您要加载的一系列条目的数据。从 jQuery 调用 PHP 服务并用响应填充一个 javascript 数组。如果数据是静态的，不是来自数据库，你可以自己写 JS 数组。

获得数据数组后，您可以开始循环遍历每个数据并对其进行处理，然后使用 jQuery 将其附加到 HTML。

这样，用户会立即获得页面加载，并且您的条目将在可用时显示出来。提供某种加载微调器以向用户指示即将发生的事情也是一个好主意。如果您需要在不中断用户体验的情况下检索其他条目，此方法还允许您从 jQuery 重新访问 PHP 服务。

【讨论】：

【解决方案2】：

您可以加载没有项目的页面并使用 jquery 加载每个项目

$(document).ready(function() {
     //iterate through array and load each item one by one
});

或

$(window).load(function() {
    //iterate through array and load each item one by one
})

【讨论】：