在Javascript循环运行时，Chrome扩展程序播放加载Gif

Question

我有一个JavaScript循环遍历xml来显示内容。完成大约需要3-5秒。同时，我想加入一个加载gif，然而，gif是加载动画直到JavaScript完成之后。到那时，我想消失。 （出于测试目的，我没有消失以确保gif实际上正在工作。下面我有什么可以显示和隐藏gif内容，所以我不需要帮助。

我认为我的想法与How to show loading gif image while content called via javascript is loading?有关，但不同之处在于它不使用按钮来调用JavaScript，而是在加载页面时调用它。

在.html中

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

在.js

function Loaded(quantity) {
  $(document).ready(function() {
        $("#loading").html("New Content");
  });
}

正如我所说的那样，这个想法可以显示/隐藏gif，只是gif无法制作动画，这违背了拥有它的目的。 ：）

Answer 1

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

1. 转到http://www.ajaxload.info/，然后点击“生成它！”制作GIF微调器。

2. 在浏览器控制台中运行i=0; while(i < 100000000) i++;。循环完成后，图像将冻结。

为了防止这种情况发生，你需要让你的循环有某种异步组件，如Javascript - how to avoid blocking the browser while doing heavy work?中所述（这个问题几乎与那个问题完全重复）：< / p>

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

这会对循环的步骤进行排队，但它允许JavaScript线程在循环的迭代之间“休息”，从而允许UI线程为GIF设置动画。

Answer 2

您应该在Web worker中执行繁重的工作，这样可以在另一个线程中完成繁重的工作而不会阻塞主线程。此外，Chrome正确支持它。