加载GIF，等待Ajax响应

本文介绍了加载GIF，等待Ajax响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在想，如果我能得到一些指引。我试图用一个加载GIF，同时获得来自Ajax请求的响应。我遇到的问题是，它不会显示GIF，同时发送电子邮件。

I was wondering if I could get some pointers. I am trying to use a loading gif while getting a response from an ajax request. The issue I am running into is that it will not display the gif while sending an email.

我已经看过就在这里几页，试图找到一个解决方案，但他们都不是工作。这是我看过的网页：Loading gif图片而jQuery的AJAX运行时与后和显示加载图像AJAX 和显示加载图像，而$就执行

I have looked at several pages on here to try and find a solution but none of them seem to be working. These are the pages I have looked at: Loading gif image while jQuery ajax is running and Display loading image while post with ajax and Show loading image while $.ajax is performed

我使用了下列code，试图做到这一点：

I have used the following code to try and achieve this:

$("#loading").bind("ajaxStart", function(){ $(this).show(); }).bind("ajaxStop", function(){ $(this).hide(); });

这不显示GIF，我也试过如下：

This does not show the gif, I have also tried the following:

$.ajax({ type: "POST", url: "contact1.php", data: dataString, beforeSend: loadStart, complete: loadStop, success: function() { $('#form').html("<div id='msg'></div>"); $('#msg').html("Thank you for your email. I will respond within 24 hours. Please reload the page to send another email.") }, error: function() { $('#form').html("<div id='msg'></div>"); $('#msg').html("Please accept my apologies. I've been unable to send your email. Reload the page to try again.") } }); return false; }); function loadStart() { $('#loading').show(); } function loadStop() { $('#loading').hide(); }

我也试图把$（＃加载）。显示（）在成功和错误功能Ajax请求和unsing .hide（）之前。我还是什么也没有显示。

I have also tried putting $("#loading").show() before the ajax request and unsing .hide() in the success and error functions. I still get nothing showing.

您可以尝试一下在这里：我测试的简历页

You can try it out here: My Test CV Page

和发送电子邮件看到，装载不工作，因为它应该。

and send an email to see that the loading isn't working as it should.

在此先感谢

推荐答案

其实你需要通过倾听ajaxStart和停止的事件，并将其绑定到文件来做到这一点：

Actually you need to do this by listening ajaxStart and Stop events and binding it to the document:

$(document).ready(function () { $(document).ajaxStart(function () { $("#loading").show(); }).ajaxStop(function () { $("#loading").hide(); }); });