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

问题描述

我有一个通过网络服务填充的树 - 这部分速度非常快，稍微慢一点的部分是填充树...我有一个 gif 旋转图像，它在服务加载时旋转.由于我使用了ajaxStop和ajaxStart触发器，所以在ajax请求完成后gif停止旋转，这是正确的.但是，由于加载需要一瞬间，因此 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.

天啊，也许它在 Chrome 中看起来很棒，但在 IE 中冻结了 5 秒.

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

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