如何在Javascript中加载树时使GIF旋转
我有一个通过Web服务填充的树 – 这部分是超快的，有点慢的部分填充树…我有一个gif旋转图像，在服务加载时旋转。 由于我使用ajaxStop和ajaxStart触发器，gif在ajax请求完成后停止旋转，这是正确的。 然而，因为加载需要一瞬间，gif会冻结那一瞬间看起来不专业。
如何使gif旋转直到树完成加载？
浏览器对图像刷新的优先级较低，因此在您的代码在DOM中操作/插入时，浏览器会忙于处理并且没有时间重新绘制图像。
除了优化代码之外，您可以做很多事情，以便您使用ajax数据进行的处理不那么密集，或者例如，如果您获得1000个项目的列表，请按间隔将它们插入页面中50，每个之间有一个小延迟，所以浏览器有时间重新绘制。
YMMV，也许它在Chrome中看起来很棒，但在IE中冻结了5秒钟。
浏览器通常不会在JavaScript代码执行时更新图像。 如果您需要微调器在DOM填充期间继续动画，您的填充函数将不得不每秒几次放弃对浏览器的控制以让它更新图像，通常是通过设置超时（没有延迟，或非常短）延迟）回调进入人口过程，然后返回。
不幸的是，这通常会使您的人口function变得更加复杂，因为您必须跟踪变量中的人口过程中的距离，而不是依赖循环和条件结构来记住您的位置。 此外，运行起来会稍慢，具体取决于您填充页面结构的方式，如果有点击或其他事件，您的应用程序可能会在人口中途传递，您最终可能会遇到令人讨厌的竞争条件。
IMO最好停止微调器然后更新DOM。 你仍然可以暂停，但如果没有微调器停顿，它就不会那么明显。 为了让浏览器有机会在ajaxStop更改其src之后更新微调器，在AJAX回调函数中使用零延迟超时延续，以便在完成后浏览器有机会在进入冗长之前显示更改的微调器人口代码。
如果主题略有不同，那么让这一人口加快步伐肯定是值得的。 （一个接一个地附加大量DOM元素本身就很慢，因为每个操作都需要花费更多时间来跋涉列表操作。通过DocumentFragment一次性添加大量DOM元素很快，但是将所有这些DOM元素放入片段中第一个地方可能不是。一次解析整个innerHTML通常很快，但生成没有注入安全漏洞的HTML是一件烦恼;通过innerHTML+=序列化和重新解析是比较慢而且非常糟糕insertAdjacentHTML / HTML5 insertAdjacentHTML很快，但是需要许多浏览器的后备实现：理想情况下快速范围操作，回退到慢节点DOM调用没有Range的浏览器。不要指望jQuery会为你做这个;它和node-by一样慢节点DOM操作因为这正是它正在做的事情。）
虽然动态操作DOM对于很多浏览器（尤其是较旧的浏览器）来说非常繁琐，但您可能希望尽可能地优化您在那里所做的事情。
另外，另一个好主意是确保运行jQuery 1.4，这样做的速度要快得多。
您可以看到jQuery团队完成的有用基准测试（1.3对1.4），其中说明了：