ajax 的加载器？ [复制]答案

【问题标题】：loader for ajax? [duplicate]ajax 的加载器？ [复制]
【发布时间】：2019-12-24 07:51:26
【问题描述】：

每次我运行我的脚本时我的页面都会变慢，这就是为什么我需要知道如何修复它

我已在本地和公共服务器上尝试过，但我遇到了同样的加载缓慢问题。

<script type="text/javascript" src="catalog_rank3.js"></script>

<form action="javascript:;" onsubmit="setSceneProducts()">
    <input type="text" class="btn-transparent" id="hov" size="50" placeholder="Link Here"><br/><br/>
    <span class="btn-border btn-primary">
        <input type="submit" class="btn btn-primary btn-lg" value="Unhide">
    </span>
</form>

<div id="main">result here</div>

我想知道我是否可以添加一个加载器，以便在整个加载完成时显示数据。

【问题讨论】：

您能否将您的 JavaScript 代码也包含在您的问题中？
你可以有一个包含 gif 的 div，并在提交表单时显示它，并在成功处理程序中隐藏它。
我刚刚添加了我的js文件

标签： javascript jquery ajax

【解决方案1】：

这是一个解决方案：

单击按钮时，显示一个包含使用$("#loader").show() 的图像的 div
模拟 3 秒的服务器延迟
使用$("#loader").hide()隐藏包含图像的div

有几个网站提供"loading ajax gifs" - 下载一个并在<img> 中引用它。

jsFiddle 链接是here。

这里是another version，它以“隐藏”整个页面的模式显示加载器图像。

HTML

<div class="container">
  <button id="button1" type="button">click me</button>
  <div id="loader"><img src="https://picsum.photos/200"></div>
</div>

CSS

#loader {
  display: none;
}

$(document).on("click", "#button1", function() {

  // show the loader 
  $("#loader").show();
  /* 
   BEGIN mockjax
   this just imitates ajax behaviour in this demo 
   see:  https://github.com/jakerella/jquery-mockjax
   */
  $.mockjax({
    url: `/path/to/your/file`,
    responseTime: 3000, // mimic a delay of 3 seconds for this demo  
    response: function(settings) {
      response = {
        status: "great!",
        message: "everything is good!"
      };

      this.responseText = JSON.stringify(response);
    }
  });
  // END mockjax - this just imitates ajax behaviour in this demo 

  $.ajax({
    url: `/path/to/your/file`,
    data: {
      "key1": "val1"
    }, // send the parameters to your server side file
    type: "POST",
    success: function(response) {
      // hide the loader
      $("#loader").hide();
    }
  });

});

【讨论】：

【解决方案2】：

如果您有多个异步调用，我建议您使用 Promises。您可以在初始化时显示加载程序（gif），当所有数据都被获取时，即所有承诺都得到解决，您可以隐藏加载程序。参考链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

【讨论】：