如何在请求进入Ajax时显示加载gif

Question

我试图在ajax post请求发送时显示加载gif图像.实际上我的代码是通过画布捕获图像,这个图像呈现并转到php页面进行保存.这个php文件保存并返回图像.现在我需要在请求发布时显示加载图像,并在ajax请求完成时隐藏加载图像.任何人都知道如何做到这一点？

JavaScript的

function capture() {
    $('.showcase').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Show loading image
            $("#preview-loading").html('<img src="editor/loader.gif" alt="Uploading...."/>');
            //Submit the form with ajax function
            $("#myForm").ajaxForm({
                target: '#preview-des'
            }).submit();
        }
    });
}

HTML

<div id="preview-loading"></div>
<div  id="preview-des"></div>
<form method="post" action="editor/save.php" enctype="multipart/form-data" id="myForm">
    <input type="hidden" name="img_val" id="img_val" value="" />
</form>

Answer 1

尝试使用如下的全局方法或使用回调.

$(document).ajaxStart(function() {
    $('img').show(); // show the gif image when ajax starts
}).ajaxStop(function() {
    $('img').hide(); // hide the gif image when ajax completes
});

已预加载gif图像(默认隐藏)