javascript - Chrome 扩展程序在 Javascript 循环运行时播放加载 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? 中所述。 (事实上​​，这个问题几乎与那个问题重复):

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

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