Question

在客户端网页上，该页面使用js / css将树型视图设置为所需的客户端外观样式。但是在一些包含许多对象的页面上，加载样式需要一些时间。所以我建议添加一个加载屏幕。

我的客户购买了一个他们喜欢的动画图标，非常符合他们网站的主题。

我在脚本中添加了一个非常简单的添加加载图标，然后在$（document）.ready上，隐藏了load元素并显示了主元素。

一切正常，除非加载的gif没有动画，直到页面完全加载为止。

似乎js的循环过于密集，因此gif没有动画。

在任何人砍掉我的头之前，我确实在这里查看了类似的问题，但这些解决方案对我不起作用 - 大多数问题都在IE中，我的问题是在chrome（不是IE），大多数其他选项是基于单击按钮启用/禁用的解决方法，但在我的情况下，这是页面最初加载时不可行的。

我想知道，有什么解决方法可以解决这个问题吗？是否可以将gif预加载到动画状态并以某种方式阻止JS干扰？或者有没有办法让js循环不那么密集，以至于它完全冻结了浏览器？

至于代码，它与上面的链接完全相同，最后只添加了这个：

$('#loading').hide();
$('.mainsearch').first().css('display', 'block');

loading元素只包含：

<img src="img/loading.gif" class="img-responsive">
<p class="centertext">Loading, please wait...</p>

但如上所述，gif不会加载，只是冻结。

对于为树设计样式的javascript，您可以在此处查看：

我们非常感谢任何帮助，因为我的客户不想浪费他们购买的装载图标。

感谢。

Answer 1

不，没有解决办法。这不是图像加载方式的问题，它只是在脚本运行时不会被动画化。

Javascript是单线程的。只要脚本正在运行，浏览器中就没有可视更新。这包括GIF动画，而脚本正在运行动画，不会移动。

Answer 2

如果无法处理实际代码并尝试它，我建议尝试将循环分解为单独的回调。每次递归时可能会使用onPostExecute或setTimeout来为浏览器提供更新/绘制的机会。