如何在Javascript中加载树时使GIF旋转 [英] How to make GIF rotate when the tree is loading in Javascript

问题描述

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

I have a tree that gets populated through the web service - this part is super fast, the part that's a bit slower is populating the tree...I have a gif rotating image that rotates while the service is loading. Since I use ajaxStop and ajaxStart trigger, the gif stops rotating after ajax request has completed, which is correct. However, because the loading takes a split second, the gif freezes for that split second which looks unprofessional.

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

How do I make the gif rotate until the tree is finished loading?

推荐答案

浏览器对图像刷新给予低优先级，因此在您的代码操作/插入DOM时，浏览器忙于那个，没有时间重新绘制图像。

Browsers give a low priority to image refreshing, so in the time your code is manipulating/inserting in the DOM, the browser is busy with that and doesn't have time to repaint the image.

除了优化代码以便处理你的代码之外，你不能做很多事情。使用ajax数据的工作量较小，或者例如，如果您获得1000个项目的列表，请以50为间隔在页面中插入它们，每个项目之间有一个小的延迟，因此浏览器有时间重新绘制。

There's not a whole lot you can do, besides optimizing your code so that the processing you're doing with the ajax data is less intensive, or for example if you're getting a list of 1000 items, insert them in the page in intervals of 50, with a small delay between each, so the browser has time to repaint.

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

YMMV, maybe it looks great as is in Chrome, but freezes for 5 seconds in IE.

这篇关于如何在Javascript中加载树时使GIF旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！