当Javascript循环运行时，Chrome扩展播放加载Gif
当Javascript循环运行时，Chrome扩展播放加载Gif
提问于 2012-12-31 22:48:36
我有一个遍历xml以显示内容的JavaScript。大约需要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没有动画效果，这就违背了拥有它的目的。:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-31 23:01:04
长时间运行的JavaScript作业会阻塞浏览器的UI，包括图像动画。要查看实际操作，请执行以下操作：
- 转到http://www.ajaxload.info/并单击"Generate it!“若要创建GIF微调器，请在浏览器控制台中运行
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进行动画处理。
Stack Overflow用户
发布于 2012-12-31 23:23:21
你应该在web worker中做繁重的工作，这样可以让繁重的工作在另一个线程中完成，而不会阻塞主线程。此外，Chrome还很好地支持它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14102968
复制相关文章
相似问题
腾讯云开发者
