如何显示加载GIF，当请求发送阿贾克斯 [英] How to show loading gif when request goes Ajax

问题描述

我想告诉加载GIF图像，而AJAX POST请求发送。其实我的code通过帆布捕捉图像，这图像渲染，去到PHP页面保存。这个PHP文件保存并返回图像。现在我需要证明，而信息发布的加载图像和隐藏加载图像，而Ajax请求完成。任何人都知道如何才能做到这一点？

的JavaScript

 函数捕获（）{
    $（'展示'）。html2canvas（{
        onrendered：功能（油画）{
            //设置隐藏字段的值，以图像数据（基64字符串）
            $（'＃img_val）VAL（canvas.toDataURL（图像/ PNG））。
            //显示加载图像
            $（＃preVIEW装）HTML（'＆LT; IMG SRC =编辑/ loader.gifALT =上传.../＆GT;'）;
            //提交与阿贾克斯函数的形式
            $（＃myForm会）。当作ajaxForm（{
                目标：＃preVIEW-DES
            }）。提交（）;
        }
    }）;
}
 

HTML

 ＆LT; D​​IV ID =preVIEW装＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =preVIEW-DES＆GT;＆LT; / DIV＆GT;
＆LT;形式方法=邮报行动=编辑/ save.phpENCTYPE =的multipart / form-data的ID =myForm的＆GT;
    ＆LT;输入类型=隐藏名称=img_valID =img_val值=/＆GT;
＆LT; /形式GT;
 

解决方案

尝试有一个全球性的方法，如下面或利用回调。

  $（文件）.ajaxStart（函数（）{
    $（'IMG'）显示（）。 // Ajax时开始显示gif图片
}）。ajaxStop（函数（）{
    $（'IMG'）隐藏（）。 //隐藏GIF图像时，阿贾克斯完成
}）;
 

有一个gif图片已经preloaded（默认为隐藏）

I am trying to show loading gif image while ajax post request sends. Actually my code is capturing image via canvas and this image renders and goes to php page for saving. This php file saves and returns the image. Now I need show the loading image while request post and hide the loading image while ajax request finishes. Anyone have idea how I can do this?

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>

解决方案

Try to have a global method like below or make use of callbacks.

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

Have a gif image already preloaded (by default hide it)

这篇关于如何显示加载GIF，当请求发送阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！