Question

我想修改要在客户端等待服务器时触发的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();
              });
    }
});

这应该在点击enter时触发加载程序，并在服务器发送新页面时显示加载程序，但是在修改脚本之前它确实做了同样的事情，这很奇怪。这是在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内容跨浏览器。不过，这会让您入门。

等待服务器时显示加载

1 个答案: