javascript - 向 dom 添加内容时 GIF 动画卡住

Question

向 dom 添加大量内容（使用 jquery .html）时，加载 gif 动画会卡住。

这是示例。单击按钮时，在附加内容之前，动画卡住了。有什么解决办法吗？谢谢！！

javascript:

$('#spinner').html('<img src="ajax-loader.gif" />');
$("input").click(function(){
    var html = '';
    for(var i = 1; i <= 100000; i++){

        html += "this is " + i + "-----------";
    }
    $("#content").html(html);
    $("#spinner").hide();
});

HTML：

<div id="spinner" class="spinner">
</div>
<input type="button" value="clike me" />
<div id="content"></div>

Answer 1

您可能会突破您的机器计算处理能力的界限，因此您的浏览器会降低GIF 动画的优先级，以便处理附加的新 DOM 数据。

尝试找到一种不同的方式来包含所需的数据......也许只是将它放在 JSON 对象中。