以增量方式上传页面的内容(不必等到加载完所有内容）

Upload page's content incrementally (not having to wait until all content is loaded)

本文关键字：不必 加载 方式      更新时间：2023-09-26

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

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

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

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

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

有了数据数组后，你可以开始一个循环来遍历每一个并处理它，然后用jQuery将其附加到你的HTML中。

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

您可以加载没有项目的页面并使用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
})
相关文章：