Question

在我的应用程序中，我的标签会在每个标签中加载form，其中包含一定数量的控件！某些选项卡将具有大量控件，而某些选项卡可能会更少。所以我想要实现的是在将内容呈现为html时显示loader。这些内容将始终在页面加载时加载，但只有在单击选项卡时才会进行渲染。请参阅以下代码！

$scope.activetab = function (tabname) {
   showLoader();
   if (tabname == 'General')
      $scope.GeneralAct = true;
   else if (tabname == 'Contact Information')
      $scope.ContactAct = true;
   else if (tabname == 'Position/Hierarchy')
      $scope.PositionAct = true;
   else if (tabname == 'Ids and Program Access')
      $scope.IdsAct = true;
   else if (tabname == 'Equipment')
      $scope.EquipmentAct = true;
   else if (tabname == 'Licensing')
      $scope.LicensingAct = true;
};

function showLoader()
{
     $('body').append('<div class="loader"></div>');
}

在渲染完成之前，showLoader发生的事情是行不通的。

现在，当alert showLoader之后，loader会触发，alert将会显示。我觉得alert停止了当前代码的执行并等待loader的用户响应，并且它将呈现在此之前执行的任何内容！那么是否有任何解决方法，以便我可以显示不等待其他html内容呈现的promise？

到目前为止我尝试了什么？

尝试从showLoader函数返回if else，并尝试将$.when代码封装在.then和<div class='loader'></div>功能中。
试图将toggle保留在正文中，而不是每次都附加它，并尝试在fadeIn/fadeOut中showLoader或if else。
尝试在setTimeOut中保留urls.py以在几秒钟后执行它。

但不幸的是，所有结果都没有成功！如果有任何显示加载器的解决方法，那么我很乐意实现它！

Answer 1

首先阅读this question的答案，专注于第2部分（编辑：第1部分非常相关......以及其他所有内容）。在您的情况下的具体问题，永远不会使用jQuery来处理Angular中的DOM。这是模型的工作。

虽然特定情况看起来可能是良性的，但您违反了应用中预期的数据流。 Angular想要严格的MVC，控制器和视图应该只通过模型进行通信，否则你最终可能会遇到混乱和冲突的代码。例如，您可能会遇到来自Angular的更改覆盖jQuery所做的更改的情况，反之亦然，并且很难控制何时以及是否发生这种情况。

关于实际问题。浏览器不会不断重新渲染，javascript会阻止渲染。这意味着，在当前的javascript代码堆栈完成运行之前，它实际上不会呈现任何内容。因此，即使您首先插入加载器，浏览器也不会显示它，直到其余代码完成，并且由于其余代码插入您的Angular内容，它们将同时呈现。

你无法解决这个问题，但通常你不需要这样做。如果你需要使用一个加载器，可能不是因为渲染时间本身，它是因为你有一个http请求或其他在选项卡更改时触发的东西，并且你想要显示加载到那个完成了。那是怎么回事？

在这种情况下，我建议将加载器放在选项卡的html中，然后在加载选项卡内容后让Angular将其删除。在tab html中有这样的东西，用css确保加载器仅在选项卡打开时显示：

<div class="loader" ng-hide="dataIsLoaded"></div>

然而，要知道你的问题有点困难。如果数据仅被加载并且它只是由于上述原因而不能提供帮助的渲染时间，那么它将不会渲染，直到js完成运行。但这也是一个奇怪的用例。渲染本身很少很慢，你需要一个装载机。

编辑：如果您的问题实际上是您的控制器太大而且很复杂（或者您有很多同步控制器），渲染变慢，那么您应该首先尝试修复它。很可能你的控制器可以大大简化，以免你得到这些问题。

angular js渲染速度[slow]阻止加载器显示

1 个答案: