在blazor中显示加载动画

我的OnInitialized中有一个繁重的任务获取数据当我使用另一个页面的链接导航到该页面时，它会一直冻结到繁重的任务结束，如何在页面之间导航时显示常规加载动画。

如果要显示/隐藏微调器或进度条，请编写如下Javascript函数，我们假设您使用NProgress javascript插件来显示微调器和进度条，这并不重要：

window.progress = (action=> {
    if (action === "start") NProgress.start();
    else if (action === "stop") NProgress.done();
};

然后您可以启动和停止它：

JSRuntime.InvokeVoidAsync("progress", "start");
// do the heavy process
JSRuntime.InvokeVoidAsync("progress", "stop");

如果要显示进度，需要有一个信号器集线器，那么JavaScript如下所示：

connection.on("ReceiveProgress", function (progress) {
    if (progress <= 100) NProgress.set(progress / 100);
    else NProgress.done();
});

现在在Blazor代码中增加进度：

  for(int i = 1 ; i<= total; i++)
  {
   // do the process step by step

   await Noty.SetProgress(total, i); 
  }

---

如果要显示/隐藏微调器或进度条，请编写如下Javascript函数，我们假设您使用NProgress Javascript插件来显示微调器和进度条，这并不重要：

window.progress = (action=> {
    if (action === "start") NProgress.start();
    else if (action === "stop") NProgress.done();
};

然后您可以启动和停止它：

JSRuntime.InvokeVoidAsync("progress", "start");
// do the heavy process
JSRuntime.InvokeVoidAsync("progress", "stop");

如果要显示进度，需要有一个信号器集线器，那么JavaScript如下所示：

connection.on("ReceiveProgress", function (progress) {
    if (progress <= 100) NProgress.set(progress / 100);
    else NProgress.done();
});

现在在Blazor代码中增加进度：

  for(int i = 1 ; i<= total; i++)
  {
   // do the process step by step

   await Noty.SetProgress(total, i); 
  }

---

最重要的是，为了防止页面冻结，请使用OnInitializedAsync方法而不是OnInitialized方法

在组件页面的“视图”部分，您可以添加如下代码，以查询person对象的数据列表是否仍然不可用：

@if (people == null)
{
    <p>Loading people...</p>
}
else
{
<ul class="people-list">
    @foreach (var person in people)
    {
    <li class="people-list-item">
        <a href="@person.Id">
            <PersonCard Person="person" />
        </a>
    </li>
    }
</ul>
}

只要数据不可用，消息加载人员。。。显示。当数据可用时，将显示该数据而不是上面的消息。可以显示动画而不是消息，例如MatProgressBar。您甚至可以在加载动画时简单地放置img元素 图像代替或添加到文本消息中

---

希望这有助于

最重要的是，要防止页面冻结，请使用OnInitializedAsync方法而不是OnInitialized方法

在组件页面的“视图”部分，您可以添加如下代码，以查询person对象的数据列表是否仍然不可用：

@if (people == null)
{
    <p>Loading people...</p>
}
else
{
<ul class="people-list">
    @foreach (var person in people)
    {
    <li class="people-list-item">
        <a href="@person.Id">
            <PersonCard Person="person" />
        </a>
    </li>
    }
</ul>
}

只要数据不可用，消息加载人员。。。显示。当数据可用时，将显示该数据而不是上面的消息。可以显示动画而不是消息，例如MatProgressBar。您甚至可以在加载动画时简单地放置img元素 图像代替或添加到文本消息中

---

希望这有助于

当然，最大的问题是：为什么获取数据的繁重任务不是异步的？因为如果可以使用异步I/O，那么您将拥有一个优雅而高效的解决方案。当然，最大的问题是：为什么获取数据的繁重任务不是异步的？因为如果可以使用异步I/O，您将拥有一个优雅而高效的解决方案。