正在Ajax调用上加载微调器

Loading spinner on Ajax call

本文关键字:加载 Ajax 调用 正在      更新时间:2023-09-26

我目前有一个ajax脚本来获取查询文件,并在数据库更新时从该文件加载新内容。但是,我该如何在脚本中添加加载微调器呢?

< div id = "AjaxLoader" >
  < h1 > Loading < /h1>
</div >
  < div id = "feed_main_load" >
  < /div>
var $loading = $('#AjaxLoader').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
 $(document).ready(function() {
       $("#feed_main_load").load("elements/feedloadtest.php");
       var refreshId = setInterval(function() {
          $("#feed_main_load").load("elements/feedloadtest.php?" + 1*new Date());
       }, 60000);
    });

您要做的是在调用$.load,之前显示微调器

并将其隐藏在完成回调中。

这里有一个完整的片段:

 $(document).ready(function() {
   $(img).hide();
       $("#feed_main_load").load("elements/feedloadtest.php");
       $(img).show();
       var refreshId = setInterval(function() {
          $("#feed_main_load").load("elements/feedloadtest.php?" + 1*new Date(), function(){
   $(img).hide();
});
       }, 60000);
    });
<img src="https://d13yacurqjgara.cloudfront.net/users/135058/screenshots/950508/spinny_2x.gif" width=64 height=64/>
<div id="feed_main_load">
</div>