javascript - 如何在请求进入 Ajax 时显示正在加载的 gif

Question

我试图在发送 ajax post 请求时显示正在加载的 gif 图像。实际上我的代码是通过 Canvas 捕获图像，该图像呈现并转到 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 图片(默认隐藏它)