Question

我想单击一个按钮，显示一个加载器图像，执行一个耗时的功能，隐藏加载器图像。当我尝试这个时，页面冻结直到整个事件运行，因此从未看到加载器图像。

以下是一个示例：

$('#btn').click(function() {
    $('#LoadingImage').show();
    <time consuming function>
    $('#LoadingImage').hide();
});

如何清楚地显示加载程序图像，更新屏幕，运行功能，隐藏加载程序图像？

Answer 1

虽然的工作原理应该，但请尝试这样做：

$('#btn').click(function() {
    $('#LoadingImage').show();
    setTimeout(function() {
        <time consuming function>
        $('#LoadingImage').hide();
    }, 0);
});

这将转义事件的调用堆栈。

如果这不起作用，那么就发布这个神秘耗时功能的更多细节。

Answer 2

由于各种原因，JS必须在主线程上执行，这意味着只要JS正在执行，绘制就会被阻止 - 即使像chrome那样的多进程体系结构也不能重新绘制选项卡，如果该选项卡正在执行JS。

你想要绘画的唯一方法是分离你的函数的执行，或者将函数移动到html5工作线程 - 它们只适用于Firefox和Safari的beta（或更普遍的任何最近的构建适当的webkit）

在执行功能时显示javascript加载程序图像

2 个答案: