等待服务器时显示加载

Question

I want to modify a js script to be fired when the client is waiting for the server instead of fireing on loading. 我想修改客户端正在等待服务器而不是在加载时触发的js脚本。 There you can see the script: FakeLoader.js , CSS I found an ajax solution here , but I had no idea how to use it, as the script is inicialized in html. 在那里，您可以看到脚本： FakeLoader.js ， CSS我在这里找到了一个Ajax解决方案，但是我不知道如何使用它，因为脚本是用html初始化的。 I think the key is at the end of the js file: 我认为关键是在js文件的末尾：

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

On the html page, I have a text input field, which makes refresh on hitting enter, so I thought I could solve it by replacing the mentioned part with code from here : 在html页面上，我有一个文本输入字段，可以在按Enter时进行刷新，因此我认为可以通过将代码替换为此处的代码来解决此问题：

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

This should fire the loader when enter was hit and show it while the server sends the new page, but instead it just does exatly the same thing before modifying the script, which is weird. 这将在单击enter时触发加载程序，并在服务器发送新页面时显示加载程序，但是在修改脚本之前它确实做了同样的事情，这很奇怪。 This is how it is initialized in html: 这是在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>

Could you give some idea? 你能给个主意吗？ I am not good at js. 我不擅长js。 Thank you. 谢谢。

Answer 1

I have a working sample with this: 我有一个工作样本与此：

<!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>

Obviously that's not how you will want the end result to look. 显然，这不是最终结果的外观。 It'll be better to move the fake loader part to a function and make the keyCode stuff cross browser. 最好将伪造的加载器部分移至某个函数，然后使keyCode内容跨浏览器。 That'll get you started though. 不过，这会让您入门。

等待服务器时显示加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-01-16 22:18:30

等待服务器时显示加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-01-16 22:18:30

解决方案1
1 已采纳 2019-01-16 22:18:30