加载微调器在渲染时卡住

loading spinner stuck while rendering

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

我有一个主要用angularJS编写的SPA。在选项卡之间切换时，我激活了一个 ng-repeat，它会在该选项卡上生成很多高图表。

所有这些高级图表（包含大量信息）的呈现需要 5-40 秒，具体取决于搜索数据。

这是微调器的指令：

Directives.directive('Loader', function () {
return {
    template: ''
    <div class="row animated fadeIn" ng-if="showLoading" style="margin-top:30px;">'
        <div class="col-md-12" style="text-align:center">'
            <img src="Content/Images/spinLoader.gif" />'
        </div>'
    </div>'
};
});

以便指令侦听showLoading以激活微调器或将其关闭。

在每个选项卡中开始渲染时，我给showLoading值 true，并在高图表中添加了一个 onLoad 属性，以便在完成渲染时showLoading给出值 false：

                chart: {
                    type: 'boxplot',
                    zoomType: 'xy',
                    //width: 580,
                    //height: 340
                    events: {
                        load: function () {
                            $scope.showLoading = false;
                        }
                    }
                },

问题是在渲染所有高图表时，微调器有点卡住并且不旋转。

当然，将微调器放在那里的整个想法是向用户显示应用程序没有卡住，而当前的情况会导致用户认为它被卡住了。

需要明确的是，GIF 确实会旋转到高图表开始显示的点 - 这意味着从图表显示为空的点到渲染完成的点

想法将不胜感激

正如您在问题中提到的，您使用 ng-repeat 在选项卡中生成大量高图表。

ng-repeat将迭代给定的项目列表，所有高图表加载将立即启动。加载大量数据可能会冻结浏览器，并且可能是由于哪个微调器无法按预期工作。

我建议使用延迟加载技术来加载大量数据集，而不是ng-repeat。拆分需要加载到适当任务中的整体高图表

示例：假设选项卡中要加载 10 个高图表。 根据其数据结构和复杂性的级别，将这些图表的加载分为 3 或 4 个步骤。

  • 第 1 步：-显示微调器 - 完成后加载 3 个高图表
  • 第 2 步：完成后再加载 3 个图表
  • 第 2 步：加载 4 个图表，隐藏微调器
相关文章：