0

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

我认为我的想法与如何在加载通过 javascript 调用的内容时显示加载 gif 图像有关？但是不同的是它不使用按钮来调用 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 无法动画化，这违背了拥有它的目的。:)

4

2 回答 2

3

长时间运行的 JavaScript 作业会阻塞浏览器的 UI，包括图像动画。要查看此操作：

  1. 转到http://www.ajaxload.info/并单击“生成它！” 制作一个 GIF 旋转器。

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

为了防止这种情况发生，您需要使您的循环具有某种异步组件，如Javascript 中所述 - 如何在执行繁重的工作时避免阻塞浏览器？（事实上​​，这个问题几乎是那个问题的重复）：

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

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

于 2012-12-31T15:01:04.433 回答
1

你应该在 web worker 中做繁重的工作，它允许在另一个线程中完成繁重的工作，而不是阻塞主线程。此外，Chrome 也很好地支持它。

于 2012-12-31T15:23:21.263 回答