动画加载器GIF不旋转
[英]Animated loader gif not spinning
问题描述
I have a simple html file with some javascript that takes some time to run, and I want to show an animated loader gif while the user is waiting. 
我有一个带有一些javascript的简单html文件，该文件需要一些时间才能运行，并且我想在用户等待时显示一个动画加载程序gif。 The problem is that the animation does not work. 问题是动画不起作用。 I tried some solution. 我尝试了一些解决方案。 Some of them from stack overflow, but nothing really worked. 其中一些来自堆栈溢出，但实际上没有任何作用。 I'm limited for using IE8 only. 我仅限于使用IE8。
Does someone knows of a solution that works well? 有人知道一个可行的解决方案吗？
My code: 我的代码：
<html>
<head>
<script type="text/javascript">
function RunAndShow() {
document.getElementById("circularG").style.display = "block";
window.setTimeout(function () {
var j = 0;
for (var i = 0; i < 2000000000; i++) {
j = i;
}
alert("done");
}, 1500);
}
</script>
</head>
<body>
<div id="circularG" style="width:200px;height:200px;display:none; background-image:url(ajax-loader.gif)">
</div>
<table>
<tr>
<td>
<a href="#" onclick="RunAndShow()">Run & Show</a>
</td>
</tr>
</table>
</body>
</html>
2 个解决方案
解决方案1
3 已采纳 2015-03-18 15:13:54
As you're having a long running for loop inside the RunAndShow the JS process becomes busy. 由于您在RunAndShow内部进行了长时间的for循环，因此JS进程变得很忙。 So it blocks the UI thread in browser. 因此，它阻止了浏览器中的UI线程。 It's expected behavior. 这是预期的行为。
You can use webworkers to run long running computation. 您可以使用网络工作者来运行长时间运行的计算。 But as you are limited to IE8, it's not available. 但是由于您限于IE8，因此无法使用。
One option is to use setInterval/setTimeout and do the heavy computation partially each time so that the UI thread doesn't block. 一种选择是使用setInterval / setTimeout并每次都部分执行繁重的计算，以使UI线程不会阻塞。
function RunAndShow() {
document.getElementById("circularG").style.display = "block";
window.setTimeout(function () {
var computed = 0, process = 500, total = 10000000000, j;
var interval = setInterval(function() {
while(computed < process && process < total ) {
j = computed;
computed++;
}
process += 500;
if(process >= total) {
clearInterval(interval);
alert("done");
}
}, 10); // increase the delay
}, 1500);
}
解决方案2
-1 2015-03-18 15:03:39
这是一个带有许多要加载的GIF动画的网站： http : //preloaders.net/它们都可以在IE8中使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.