我想点击一个按钮,在显示加载动画后,执行一项耗时的任务,并在执行完毕后隐藏加载动画。但是当我尝试这样做时,页面会直到整个事件运行完毕才解除冻结,因此加载动画从未被看到。
以下是示例:
$('#btn').click(function() {
$('#LoadingImage').show();
<time consuming function>
$('#LoadingImage').hide();
});
如何明显地显示加载图像,更新屏幕,运行函数并隐藏加载图像?
我想点击一个按钮,在显示加载动画后,执行一项耗时的任务,并在执行完毕后隐藏加载动画。但是当我尝试这样做时,页面会直到整个事件运行完毕才解除冻结,因此加载动画从未被看到。
以下是示例:
$('#btn').click(function() {
$('#LoadingImage').show();
<time consuming function>
$('#LoadingImage').hide();
});
如何明显地显示加载图像,更新屏幕,运行函数并隐藏加载图像?
虽然你现在拥有的代码应该能够工作,但试试这样做:
$('#btn').click(function() {
$('#LoadingImage').show();
setTimeout(function() {
<time consuming function>
$('#LoadingImage').hide();
}, 0);
});
这将逃避事件的调用堆栈。
如果那还不起作用,那么请提供更多关于这个耗时函数的细节。