角度js渲染速度[缓慢]阻止装载器显示

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的用户响应，并且它会渲染在此之前执行的任何内容！那么是否有任何解决方法，以便我可以显示不等待其他html内容呈现的loader？

我到目前为止试过的东西？

• 试图返回promise从showLoader功能，并试图以包裹if else代码$.when和.then功能。
• 试图保持<div class='loader'></div>在身体，而不是每次追加它，并试图toggle或fadeIn/fadeOut它在showLoader。
• 尝试保留if else在setTimeOut后几秒钟内执行它。

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

Answer 1

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

虽然具体的情况可能看起来很温和，但是却违背了应用程序中预期的数据流。 Angular希望严格的MVC，控制器和视图只能通过模型​​进行通信，否则你最终会遇到混乱和冲突的代码。例如，您可能会遇到来自Angular的更改会覆盖jQuery所做的更改的情况，反之亦然，并且在发生这种情况时很难控制。

---

对实际问题。浏览器不会不断重新呈现，并且JavaScript块呈现。这意味着它不会实际呈现任何东西，直到当前的JavaScript代码堆栈运行完毕。因此，即使先插入加载器，浏览器也不会显示它，直到代码的其余部分完成，并且由于代码的其余部分插入了Angular内容，两者都将同时呈现。

你不能真正解决这个问题，但通常你不需要。如果你需要使用一个加载器，它可能不是由于渲染时间本身，这是因为你有一个http请求或其他东西，当标签更改时触发，并且你正在寻找显示加载直到完成。这里发生了什么？

在这种情况下，我会建议将加载器放在该选项卡的html内，然后让Angular在加载选项卡内容后将其删除。因此，像这样的标签HTML里面，用CSS来确保装载机仅所示，当标签被打开：但是

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

这是一个有点很难知道你的问题是什么。如果只加载数据，并且这只是渲染时间，这对上述原因没有帮助，那么在js完成运行之前它不会渲染。但这也是一个奇怪的用例。渲染本身很慢很少，所以你只需要一个加载器就可以了。

编辑：如果您的问题实际上是你的控制器是如此庞大而复杂（或者你有这么多的同时控制器）渲染变慢，那么你真的应该尝试修复第一位。很有可能你的控制器可能被大大简化，以至于你不会得到这些问题。