插入 DOM 时 IE 冻结 GIF 动画

Posted 2023-05-09

【中文标题】插入 DOM 时 IE 冻结 GIF 动画

【英文标题】：IE freezes GIF animation when DOM insert

【发布时间】：2013-06-24 22:15:12

【问题描述】：

我的代码有一个动画 GIF（加载图像）

我从 Ajax 调用的变量“数据”中获取了 html 页面。

$("#content").html(data); // takes about 5 seconds and the GIF animation freezes since IE is single threaded.

有没有办法用setTimeout/setInterval函数逐行写入数据，让线程短暂释放，让动画继续播放？

小提琴网址： http://jsfiddle.net/deepakssn/Kp2bM/

我尝试过的替代解决方案：

<style>
#loading 
        background: url(loading.gif) no-repeat center center #fff;
        display: block;
        position: fixed;
        height: 500px;
        width: 500px;

</style>
<script src="../scripts/jquery.js"></script>
<script>
$(window).load(function () 
    function writeData(data) 
        var yourLines = data.split("\n");
        for (var i = 0, j = yourLines.length; i < j; i++)             
            var x = setTimeout(function()                 
                $("#content").append(yourLines[i]);
                console.log("Line No :"+[i]+" "+Date.now());                
            , 5000);
                
    
    function ajaxLoad() 
            $.ajax(
                    url: "test.txt"
            ).done(function (data)                         
                    console.log("success"+Date.now());
                    writeData(data);
                    //$("#content").html(data);
                    console.log("loaded data"+Date.now());

            );
    
    ajaxLoad();
);
</script>
<div id="loading"></div>
<div id="content"></div>

【参考方案1】：

我在为我的一个项目添加“加载”指示器时遇到了这个问题。我使用了this ，它为我解决了这个问题。因为它不是图像，所以它不会冻结。

【讨论】：

@deepakssn 我希望你把 spin.js 的开始和停止放在 ajaxSend/ajaxComplete 回调中。

但是网站使用的gif图片看起来很不一样，无法使用spin js创建。所以没花太多时间在spin js上。

我想使用 gif 图像进行加载。 IE 一次只有一个线程。有没有办法使用 setTimeOut 来模拟平滑加载图像动画？