当Javascript循环运行时，Chrome扩展播放加载Gif

我有一个JavaScript，它通过xml循环显示内容。大约需要3-5秒才能完成。同时，我想合并一个加载gif，然而，gif在JavaScript完成之前是加载动画的。到那时，我想消失。（出于测试目的，我没有让它消失，以确保gif确实工作。下面我有一些可以显示和隐藏gif内容的方法，因此我不需要帮助

我认为我的想法与它不使用按钮调用JavaScript有关，它是在页面加载时调用的

In.html

<div id="loading"><img src="loading.gif"/>Starting Content</div>

---

正如我所说的，这个想法是用来显示/隐藏gif的，只是gif无法动画化，这违背了使用它的目的。

长时间运行的JavaScript作业会阻塞浏览器的UI，包括图像动画。要看到这一点，请执行以下操作：

转到并单击“生成它！”以生成GIF微调器

运行

i=0；而（i<100000000）i++在浏览器控制台中。循环完成时，图像将冻结

为了防止这种情况发生，您需要使循环具有某种异步组件，如中所述（事实上，这个问题几乎与那个问题重复）：

for（变量i=0；i<1000000；++i）{
设置超时（功能（i）{
返回函数（）{doSomethingHeavy（i）；}
}（i） ，0）；
}

---

这将使循环的步骤排队，但它允许JavaScript线程在循环的迭代之间“休息”，这反过来又允许UI线程为GIF设置动画。

长时间运行的JavaScript作业会阻止浏览器的UI，包括图像动画。要看到这一点，请执行以下操作：

转到并单击“生成它！”以生成GIF微调器

运行

i=0；而（i<100000000）i++在浏览器控制台中。循环完成时，图像将冻结

为了防止这种情况发生，您需要使循环具有某种异步组件，如中所述（事实上，这个问题几乎与那个问题重复）：

for（变量i=0；i<1000000；++i）{
设置超时（功能（i）{
返回函数（）{doSomethingHeavy（i）；}
}（i） ，0）；
}

---

这会将循环的步骤排成队列，但它允许JavaScript线程在循环的迭代之间“休息”，这反过来又允许UI线程为GIF设置动画。

您应该在web worker中执行繁重的工作，这允许在另一个线程中执行繁重的工作，而不是阻塞主线程。此外，Chrome还支持它。

您应该在web worker中完成繁重的工作，这样可以在另一个线程中完成繁重的工作，而不会阻塞主线程。除此之外，Chrome还提供了适当的支持。

因此，澄清一下，这3-5秒的时间是在一个紧密的循环中度过的，而且它不是异步的？为什么您要在一个加载的

函数中声明
$（document）.ready
？它已绑定到
DOMContentLoaded
。你确定你的xml解析是按照@MattiVirkkunen的建议异步完成的吗？Jim：我在xml JavaScript完成后调用Loaded，这样它就可以覆盖div文本了。马蒂和吉姆：这不是不同步的。我正在使用apsillers方法合并setTimeout，但有点麻烦，因为函数在doSomethingHeavy部分中有几个从函数外部提取的变量。@JimSchubert感谢您的想法。我已经能够将document.ready函数合并到document.ready函数中，以便在加载结果时对结果进行计数，而不是使用加载条。我不确定你的意思是否是我正在使用的
DOMContentLoaded
还有另一种方法，所以如果它更有效的话，我现在不知道如何更改它。现在一切都在给出期望的结果。因此，请澄清一下，这3-5秒的时间是在一个紧密的循环中度过的，而且它不是异步的？为什么要在一个加载的
函数中声明
$（文档）。ready
？它已绑定到
DOMContentLoaded
。你确定你的xml解析是按照@MattiVirkkunen的建议异步完成的吗？Jim：我在xml JavaScript完成后调用Loaded，这样它就可以覆盖div文本了。马蒂和吉姆：这不是不同步的。我正在使用apsillers方法合并setTimeout，但有点麻烦，因为函数在doSomethingHeavy部分中有几个从函数外部提取的变量。@JimSchubert感谢您的想法。我已经能够将document.ready函数合并到document.ready函数中，以便在加载结果时对结果进行计数，而不是使用加载条。我不确定你的意思是否是我正在使用的
DOMContentLoaded
还有另一种方法，所以如果它更有效的话，我现在不知道如何更改它。现在一切都得到了预期的结果。+1我从未想过使用ajaxload.info来演示js中的阻塞。很好的可视化问题的建议，我将来必须使用它。@apsillers我以前确实尝试过
setTimeout
，但不是以同样的方式。最后得到了你的参考方法。由于“阻塞”和“繁重的工作”这两个标题不是一个熟悉的想法，我在搜索中找不到它。这使得XML的加载看起来更快（或者至少，因为它是异步加载的），它不需要加载gif。谢谢！：）+1我从未想过使用ajaxload.info在js中演示阻塞。很好的可视化问题的建议，我将来必须使用它。@apsillers我以前确实尝试过
setTimeout
，但不是以同样的方式。最后得到了你的参考方法。由于“阻塞”和“繁重的工作”这两个标题不是一个熟悉的想法，我在搜索中找不到它。这使得装载X
function Loaded(quantity) {
  $(document).ready(function() {
        $("#loading").html("New Content");
  });
}

for(var i=0; i < 1000000; ++i) {
    setTimeout(function(i) {
        return function() { doSomethingHeavy(i); }
    }(i), 0);
}