渲染

Question

我有一个主要用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确实旋转直到高图表开始显示 - 这意味着图表显示为空的点直到渲染完成的点

想法将不胜感激

Answer 1

正如您在问题中提到的那样，您使用ng-repeat在制表符中生成了大量高级图表。

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

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

示例：假设您在标签中加载了10个高图表。根据其数据结构和复杂程度，将这些图表的加载分为3或4个步骤。

• 步骤1：-Show Spinner - 加载3个高图表，一旦完成
• 第2步：加载3张图表，一旦完成
• 第2步：加载4张图表，隐藏微调器