等待服务器时显示加载答案

【问题标题】：Show loading while waiting for server等待服务器时显示加载
【发布时间】：2019-01-23 23:24:21
【问题描述】：

我想修改一个 js 脚本，以便在客户端等待服务器而不是在加载时触发。在那里你可以看到脚本：FakeLoader.js, CSS 我找到了一个 ajax 解决方案here，但我不知道如何使用它，因为脚本是在 html 中初始化的。我认为关键在js文件的末尾：

$(window).load(function(){
            centerLoader();
          $(window).resize(function(){
            centerLoader();
          });
    });

在 html 页面上，我有一个文本输入字段，它会在按 Enter 时刷新，所以我想我可以通过将提到的部分替换为 here 中的代码来解决它：

$(document).keypress(function (e) {
    if (e.which == 13) {
                centerLoader();
              $(window).resize(function(){
                centerLoader();
              });
    }
});

这应该在输入被击中时触发加载器并在服务器发送新页面时显示它，但它只是在修改脚本之前做同样的事情，这很奇怪。这是它在 html 中的初始化方式：

<div id="fakeLoader"></div>

<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>

你能给出一些想法吗？我不擅长js。谢谢。

【问题讨论】：

假加载器需要 jquery - 你包括了吗？还有centerLoader() 做什么以及假加载器div 的样式如何。你能把它包括在你的例子中吗？
fakeloader 运行良好，但是当我更改代码时，它会在新页面加载时显示，但是，它应该在检测到 Enter 时启动。 jquery 包含在内，centerLoader() 在详细信息中链接的脚本中。链接：joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js
你在每次按键时都绑定事件监听器，，，，，，这是个坏主意。

标签： javascript loading fakeloader.js

【解决方案1】：

我有一个工作示例：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js"></script>
    <link rel="stylesheet" href="http://joaopereirawd.github.io/fakeLoader.js/demo/css/fakeLoader.css" />

    <script>
    window.onload = () => {
      document.body.addEventListener('keydown', function (e) { 
       if (e.keyCode == 13) {
       $("#fakeLoader").fadeIn();
         $("#fakeLoader").fakeLoader({
           timeToHide:1200, //Time in milliseconds for fakeLoader disappear
           spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
          });
        }
     });
    }
    </script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id="fakeLoader"></div>

<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
  </body>

</html>

显然这不是您希望最终结果的样子。将假加载器部分移动到一个函数并让 keyCode 东西跨浏览器会更好。不过，这会让你开始。

【讨论】：

我在 js 文件中试过这个： $(document).keypress(function (e) { if (e.which == 13) {$(el).fadeIn(); } });没有变化，在新页面上显示。不幸的是，我还没有真正理解这个 DOM 的东西。您能否添加更多详细信息？ :)
我错过了您加载新页面的部分。您必须显示微调器，然后加载页面。当您访问服务器时，您实际上是在重置您的 javascript - 您无法保留代码或变量。
我更新了一个工作示例以帮助您入门。每当您按 Enter 键时，它就会显示微调器。
这正是我想要的工作方式！干得好，谢谢！我从代码底部注释了原始初始化，因此它按预期工作。