Question

我正在加载大量数据，即使在收到数据后，也可能需要几秒钟来绘制页面。

我简化了下面的代码，请原谅此玩具示例中的任何语法错误。我的angularjs代码的结构或多或少都像这样

$scope.isLoading = true;
$http.get(url)
  .then(function(resp) {
    $scope.mydata = resp.data;
  })
  .finally(function() {
    $scope.isLoading = false;
  })

我的HTML是

<div class="spinner" ng-show="isLoading">
...
<!-- lots of data and complex DOM manipulation below -->

我也试过

<div class="spinner" ng-hide="mydata">
...
<!-- lots of data and complex DOM manipulation below -->

在这两种情况下，我得到一个微调器，然后旋转器消失，然后几秒钟过去，最后数据显示出来。如果数据较小，那么延迟就不那么明显了。

当我查看浏览器的开发人员工具时，会收到数据并且微调器立即消失。然后在页面最终加载之前发生多秒延迟。所以我怀疑浏览器正在尝试编写DOM

我想修剪微调器消失和出现的页面之间的延迟。

在写完所有DOM后是否会调用某种钩子/回调？

Answer 1

由于视觉延迟是由于同步地在摘要上同步更新DOM并阻塞主线程这一事实，因此应该至少推迟一次删除微调器：

$http.get(url)
  .then(function(resp) {
    $scope.mydata = resp.data;
  })
  .finally(function() {
    return $timeout(function () {
      $scope.isLoading = false;
    })
  })

超时延迟可以增加到非零值（例如20），具体取决于导致冻结工作的应用程序部分的方式。 $ timeout引起的新摘要可能会导致新的冻结，因此问题可能应该通过优化来解决。

如何在加载DOM后停止微调器

1 个答案: