Question

我有一个简单的html文件，其中包含一些javascript，需要一些时间才能运行，我希望在用户等待时显示动画加载程序gif。问题是动画不起作用。我试过一些解决方案。其中一些来自堆栈溢出，但没有真正起作用。我仅限于使用IE8。

有人知道一个运作良好的解决方案吗？

我的代码：

<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>

Answer 1

当你在RunAndShow内部长时间运行循环时，JS进程变得很忙。所以它阻止了浏览器中的UI线程。这是预期的行为。

您可以使用webworkers运行长时间运行的计算。但由于您仅限于IE8，因此无法使用。

一个选项是使用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);

    }

<强> DEMO

Answer 2

这是一个包含大量GIF动画的网站：http://preloaders.net/ 它们都在IE8中工作

动画装载机gif没有旋转

2 个答案: