动画加载程序gif未旋转

Animated loader gif not spinning

本文关键字：旋转 gif 程序 加载 动画      更新时间：2023-09-26

我有一个简单的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>

由于RunAndShow中有一个长时间的for循环，JS进程变得繁忙。所以它阻塞了浏览器中的UI线程。这是意料之中的行为。

您可以使用webworker来运行长时间运行的计算。但由于您仅限于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

这里有一个网站，有很多动画gif可供加载：http://preloaders.net/它们都在IE8 中工作

相关文章：