Question

如何在执行JavaScript函数之前显示正在进行的图像？

<script type="text/javascript">
function create()
{
  //Perform operation
}
</script>

在函数create（）完成执行之前，我需要显示一个正在进行的图像。单击按钮即可调用此功能。

谢谢，

萨钦

Answer 1

您可以通过将此JQuery库作为脚本标记源添加来使用JQuery库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

现在你可以使用JQuery的延迟API像这样： -

function create() {

    var deferred = $.deferred;
    blockUI(); // In blockui you can create a dialog using jquery ui 

    //Here do any work you want to do in this function

    deferred.resolve();

    //Here call unblockUI() to delete the dialog created first

    return deferred.promise();

}

var xyz = create();
$.when(xyz).done(function(x) {

    //Any work you want to do after create function is done performing

})

您可以在此处详细了解延迟API 访问http://api.jquery.com/jquery.when

Answer 2

我认为这会对你有帮助。

<div id="loader" class="overlay">
     <div class="processMessage">
          <img src="images/Loader.gif" height="40" width="40" />
     </div>
</div>

这是css：

 .processMessage {
        position: fixed;
        top: 30%;
        left: 43%;
        padding: 10px;
        width: 13%;
        z-index: 1001;
        text-align: center;
    }

    .overlay {
        background-color: rgba(216, 216, 224, 0.8);
        z-index: 999;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: none;
    }

现在你只需要使用$（＆＃34;＃loader＆＃34;）。hide（）和.show（）来控制它。如果这是一个ajax调用，你可以这样做。

try {
    $.ajaxSetup({
    beforeSend: BeforeSend,
    complete: Complete,
    error: Error
    });
} catch (e) {
 Error();
}

function BeforeSend() {
 $("#loader").show();
}

function Complete() {
 $("#loader").hide();
}

function Error(xhr, err, exception) {
 alert("Some exception");
 $("#loader").hide();
 console.log(exception);
}

显示进度图像，直到javascript函数完成执行

2 个答案: