如何在Javascript中加载树时使GIF旋转

时间:2010-02-16 18:41:25

标签: javascript jquery tree

我有一个通过Web服务填充的树 - 这部分是超快的,有点慢的部分填充树...我有一个gif旋转图像,在服务加载时旋转。由于我使用ajaxStop和ajaxStart触发器,gif在ajax请求完成后停止旋转,这是正确的。但是,由于加载需要一瞬间,gif会在一瞬间冻结,看起来不专业。

如何使gif旋转直到树完成加载?

3 个答案:

答案 0 :(得分:8)

浏览器对图像刷新的优先级较低,因此当您的代码在DOM中操作/插入时,浏览器会忙于处理并且没有时间重新绘制图像。

除了优化代码之外,你可以做很多事情,以便你对ajax数据进行的处理不那么密集,或者例如,如果你得到1000个项目的列表,将它们插入到页面间隔为50,每个页面之间有一个小延迟,因此浏览器有时间重新绘制。

YMMV,也许它在Chrome中看起来很棒,但在IE中冻结了5秒钟。

答案 1 :(得分:4)

浏览器通常不会在JavaScript代码执行时更新图像。如果你需要微调器在DOM填充期间继续动画,你的填充函数将不得不每秒几次放弃对浏览器的控制以让它更新图像,通常是通过设置超时(没有延迟,或非常短)延迟)回调进入人口过程,然后返回。

不幸的是,这通常会使您的人口功能变得更加复杂,因为您必须跟踪变量中的群体过程中的距离,而不是依赖循环和条件结构来记住您的位置。此外,它的运行速度稍慢,具体取决于您如何填充页面结构,如果有单击或其他事件,您的应用程序可能会在人口中途传递,您最终可能会遇到令人讨厌的竞争条件。 / p>

IMO最好停止微调器,然后更新DOM。你仍然可以暂停,但如果没有微调器停顿,它就不会那么明显。为了让浏览器有机会在ajaxStop更改其src后更新微调器,在AJAX回调函数中使用零延迟超时延续,以便在完成时浏览器有机会显示在进入冗长的人口代码之前,修改过的微调器。

如果主题略有不同,那么让这个人群加快步伐肯定是值得的。 (一个接一个地附加大量DOM元素本身就很慢,因为每个操作都需要花费更多的时间来跋涉列表操作。通过DocumentFragment一次性添加大量DOM元素很快,但是将所有这些DOM元素放入片段中第一个地方可能不是。一次解析整个innerHTML通常很快,但生成没有注入安全漏洞的HTML是一件烦恼;通过innerHTML+=进行序列化和重新解析是比较慢而且非常糟糕.IE / HTML5 insertAdjacentHTML速度很快,但需要许多浏览器的回退实现:理想情况下快速范围操作,对于没有范围的浏览器,回退到慢节点DOM调用。不要指望jQuery的append为你做这件事;它与逐节点DOM操作一样慢,因为这正是它正在做的事情。)

答案 2 :(得分:0)

虽然动态操作DOM对于很多浏览器(尤其是较旧的浏览器)来说非常繁琐,但您可能希望尽可能地优化您在那里做的事情。

另外,另一个好主意是确保运行jQuery 1.4,这样做的速度要快得多。

您可以看到jQuery团队完成的有用基准测试(1.3 vs 1.4),其中说明了这一点:

http://jquery14.com/day-01/jquery-14