Javascript 我想在我的 php 页面从服务器获取数据时显示等待动画

I want to display a waiting animation while my php page is fetching data from the server

提问by Raviraja

Here in my application i need to display a waiting animation while my php page is fetching data from the server...

在我的应用程序中，当我的 php 页面从服务器获取数据时，我需要显示一个等待动画...

As it is taking more time to do the manipulations...

由于需要更多时间进行操作...

Can any one help me out with some easy way to do this...

任何人都可以用一些简单的方法来帮助我做到这一点......

Thanks in advance

提前致谢

~Urs Ravi

~乌尔斯·拉维

回答by Nicky Waites

If you are using jQuery Ajax then you can do something like this

如果你使用 jQuery Ajax 那么你可以做这样的事情

 $("#loading").ajaxStart(function () {
    $(this).show();
 });

 $("#loading").ajaxStop(function () {
   $(this).hide();
 });

html

html

<div id="loading" style="display:none;">
    Loading Please Wait....
    <img src="ajax-loader.gif" alt="Loading" />
</div>

Grab your image from http://www.ajaxload.info/

从http://www.ajaxload.info/ 获取您的图片

Also see duplicate here - How to show loading spinner in jQuery?

另请参阅此处重复 -如何在 jQuery 中显示加载微调器？

回答by Raviraja

Assuming you have container div at your page to show contents.

假设您的页面上有容器 div 来显示内容。

So by default, show a loading animation image in it, like the following :

所以默认情况下，在其中显示加载动画图像，如下所示：

<div id="container" >
    Loading Please Wait....
    <img src="ajax-loader.gif" alt="Searching" />
</div>

As query fetching process completes and your Htmlto content is ready :

随着查询获取过程完成并且您Html的内容准备就绪：

Replace divand inner HTMLwith page content.

替换div和inner HTML页面内容。

<div id="container" >
   Replace image with Page content after fetching data...
</div>