Show loading while waiting for server

Question

I want to modify a js script to be fired when the client is waiting for the server instead of fireing on loading. 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. I think the key is at the end of the js file:

$(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 :

$(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. This is how it is initialized in 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. Thank you.

the fake loader requires jquery - did you include that? Also what does `centerLoader()` do and how is the fake loader div styled. Can you include that in your example. — loctrice, Jan 16 '19 at 22:02
fakeloader is working well, but when I changed the code, it is showing when new page is loading however, it should start when Enter is detected. jquery is included, centerLoader() is in the script linked in the details. Link: http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js — user7113942, Jan 16 '19 at 22:10
You keep binding event listeners on every keypress,,,,,, that is a bad idea. — epascarello, Jan 17 '19 at 15:25

loctrice · Accepted Answer · 2019-01-17T16:06:39.840

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. That'll get you started though.

I tried this in js file: $(document).keypress(function (e) { if (e.which == 13) {$(el).fadeIn(); } }); No change, shows it on new page. Unfortunately, I dont really understand this DOM thing yet. Could you please add more details? :) — user7113942, Jan 16 '19 at 22:24
I missed the part where you were loading the new page. You would have to show the spinner and then load the page. When you hit the server you're essentially resetting your javascript - you can't persist code or variables. — loctrice, Jan 17 '19 at 14:22
I updated with a working sample to get you started. It'll show the spinner whenever you hit enter. — loctrice, Jan 17 '19 at 15:24
This is exactly the way I want it to work! Great job, thank you! I comment the original initialization from the bottom of your code, so it works as expected. — user7113942, Jan 17 '19 at 21:21

Show loading while waiting for server

1 Answers1