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