在等待服务器时显示加载

Question

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

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

在 html 页面上，我有一个文本输入字段，它会在按下回车时刷新，所以我想我可以通过将提到的部分替换为 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。谢谢。

Answer 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 内容跨浏览器。不过，这会让您入门。

在等待服务器时显示加载

Show loading while waiting for server

javascript

loading

fakeloader.js