延迟生成指令,直到页面准备就绪并响应

时间:2016-12-15 16:13:04

标签: angularjs angularjs-directive

我正在开发一个单页应用程序,其中某些部分非常慢。它们很慢,因为我在转发器中显示400个复杂的东西供用户滚动。每个东西都是由一个相当复杂的指令生成的,它执行大量的数据绑定和表达式评估,添加一个或两个点击处理程序,并显示几个图像。在某些情况下,我还需要在这些图像上使用grayscale CSS过滤器,但这看起来似乎太慢了。

我当然已经把我的大部分数据绑定到一次性数据绑定中,但是第一次只生成400个东西仍然很慢。它最初是通过ng-if隐藏的,当我没有显示它时会加速它,但是一旦我需要显示它,一切都会等待10秒才会发生。我想提前加载它,但是使用ng-show代替ng-if意味着加载整个应用程序必须等待这个。

我想要的是加载应用程序的其余部分,然后,在我们等待用户输入的同时,开始创建这400个内容,以便在我需要显示它们之后准备就绪。我不希望用户注意到它有多慢。

问题是,我不知道该怎么做。有什么想法吗?

编辑:考虑到这一点(并与我的妻子讨论过),我看到了两个选项(我至少在概念上理解这一点):

  1. 简单,快速,无聊和懦弱的解决方案是不能同时展示400件事,而是将它们分成几块并一次展示40件。这应该会更快,但也不那么好,因为用户需要点击以访问所有数据。

  2. 有趣的解决方案是编写一个新的ng-repeat,它在每个异步事件中生成模板的400个被转换的副本,因此它们不会阻止用户交互。我真的很喜欢这个想法,但是有一个很大的缺点:这是一个雄心勃勃的想法,具有深度的角度魔法,而且我没有太多时间可用。

1 个答案:

答案 0 :(得分:0)

好的,没有看到你的代码结构,通过Q& A,我试图弄清楚。如果我理解正确,我相信解决方案是异步处理您的图像,并在视图可见时(即通过点击按钮/标签显示'数组'查看'从而触发ng-repeat)。顺便说一句,这个解决方案假定延迟是因为图像被处理而不是因为它们被显示。

方法1(不太喜欢) 要做到这一点,最好创建一个' ImageDataService'服务,它在应用程序启动时被启动,并继续构建此数组并花费其所需的任何时间异步,而不关心视图显示与否。此服务将被注入适当的视图或指令控制器 - 可能是当前ng-repeat范围所在的位置。

同时,您还需要更改ng-repeat中的指令,以便从ImageDataService提供的数组中获取预构建数据,而不是在查看时实际执行计算。如果该指令的数据尚未准备就绪,该指令将显示类似于' loading ...'否则,该指令将只显示预建的图像。这样,触发ng-repeat时(即其视图显示)并不重要,因为它只显示在该点处理和准备好的内容,并将其余部分显示为“加载...”。 。'

方法2(我更喜欢这个) 或者,也许更好,您可以放弃在服务中创建预处理数组,如方法1中所示,而是通过调用返回异步承诺的服务方法来修改指令以异步处理它们的数据:

(控制器内的代码)

var promise = ImageDataService.processImage(directiveData);
promise.then(function() {...set the directive image attributes..})

毋庸置疑,ImageDataService.processImage()方法在处理数据时需要返回一个promise。像往常一样,该指令将显示“正在加载......”。直到那时。此外,虽然ImageDataService不再需要预先填充方法1中提到的其数组,但最好将处理后的图像保存到类似的数组中,以作为缓存而不是不必要地重新处理它们。请注意,在这种情况下,您不需要需要在服务中包含processImage() - 但它确实很好并且可以将关注点分开。练习在服务中保留异步数据处理(ajax等)的工作,该服务可以在应用程序范围内而不是在控制器内注入。

这两种常规方法中的任何一种都应该有效。