显示然后隐藏动画指示器/旋转图像是向用户展示他们的操作已经完成并且正在等待操作完成时发生了某些事情的好方法，例如，如果该操作需要通过AJAX从服务器加载一些数据。
我的问题是，如果减速的原因是一个处理器-密集型函数，则gif会冻结。
在大多数浏览器中，GIF在处理器耗费资源的函数执行时停止动画。对于用户来说，这看起来像是某些东西已经崩溃或出现故障，而实际上它正在工作。
JSBIN示例
注意： "This is slow"按钮将占用处理器一段时间-对我来说大约10秒，具体取决于电脑配置。您可以通过HTML中的"data-reps"属性更改其执行时间。
- 期望结果：点击后，动画开始运行。当进程完成时，文本会发生变化（通常我们也会隐藏指示器，但如果保留旋转效果，例子更清晰）。
- 实际结果：动画开始运行，然后冻结直到进程完成。这会给人一种东西坏了的印象（直到它突然意外地完成）。
如果JS正在繁忙地占用处理器，有没有一种不会冻结的指示进程正在运行的方法？ 如果没有办法进行动画，我将显示然后隐藏静态文本消息，说Loading...或类似的内容，但动画看起来更加活跃。
如果有人想知道为什么我使用处理器密集型的代码而不是通过优化避免问题：这涉及到很多必要的复杂渲染。代码相当高效，但它所做的事情很复杂，因此始终会对处理器产生需求。这只需要几秒钟，但足以让用户感到沮丧，有很多研究表明指示器对于用户体验很有帮助。
与处理器密集型功能相关的第二个问题是，gif旋转器实际上直到一个同步集中的所有代码都运行完成后才会显示 - 这意味着它通常要等到隐藏旋转器时才会显示旋转器。
- JSBIN示例。
- 我在这里找到了一个简单的解决方法（在上面的另一个示例中使用），即用非常短的间隔
setTimeout( function(){ ... },50);将显示指示器后的所有内容包装在异步函数中。这可以工作（请参见上面的第一个示例），但不是很干净 - 我相信有更好的方法。
我相信在处理器密集型加载方面一定有某种标准方法，但我不知道 - 或者可能只是使用 setTimeout 和 Loading... 文本？我的搜索没有找到任何结果。我已经阅读了6或7个类似问题的提问，但它们都与此无关。
编辑：评论中有一些很好的建议，这里是我确切问题的更多细节：
- 复杂的过程涉及处理大型JSON数据文件（即，在加载文件后进行JS数据操作），并呈现SVG（通过Raphael.js）可视化，包括一个复杂、详细的可缩放世界地图，基于从JSON数据处理的结果。因此，其中一些需要DOM操作，而另一些则不需要。
- 不幸的是，我需要支持IE8但是如果必要，我可以为IE8 / IE9用户提供最小回退，例如
Loading...文本，并为其他所有人提供现代化的东西。