javascript - 加载 gif 不是动画？

Question

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

这是问题的示例:http://zamozuan.com/content/16-search-auto-parts-by-vehicle-chevrolet

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

我有一个很简单的添加到脚本中添加一个加载图标，然后在$(document).ready上，隐藏加载元素并显示主要元素。

除了在页面完全加载之后加载 gif 没有动画外，一切正常。

看来 js 的循环过于密集，所以 gif 没有动画效果。

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

我想知道，是否有解决此问题的方法？是否可以将 gif 预加载到动画状态并以某种方式防止 JS 干扰？或者有没有办法让 js 循环不那么密集以至于完全卡住浏览器？

代码和上面的链接一模一样，只是最后加了一句:

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

加载元素只包含:

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

但如前所述，gif 不会加载，只是卡住。

对于设置树样式的 javascript，您可以在此处查看:

http://zamozuan.com/js/tree.js

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

谢谢。

Answer 1

不，没有解决方法。图片的加载方式不是问题，只是在脚本运行时不会设置动画。

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