Question

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

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

Answer 1

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

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

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

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

这样，用户立即加载页面，您的条目将在可用时显示。给某种加载微调器指示用户即将发生的事情也是一个好主意。如果您需要在不中断用户体验的情况下检索其他条目，此方法还允许您从jQuery返回到PHP服务。

Answer 2

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

加载每个项目

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

OR

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

逐步上传页面内容（不必等到加载所有内容）

2 个答案: