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

我试图在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(''); //Submit the form with ajax function $("#myForm").ajaxForm({ target: '#preview-des' }).submit(); } }); } 

HTML

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图像（默认隐藏）

Answer 2

您可以通过表单中的ajax =“true”来执行此操作，然后为此编写脚本

为此设定风格

 img#loadingimg{ display: none; } 

的script.js

 $(document).ready(function(e) { $("form[ajax=true]").submit(function(e) { e.preventDefault(); $("#loadingimg").show(); }); }); 

工作小提琴在这里找到： http ： //jsfiddle.net/clickthelink/Uwcuz/1/