Help with JavaScript to produce a simple pre-loader for a web page and add a delay

[kerry14]

Hi
First of all I have to say I am not familiar with JavaScript, I really tend to cut and paste it when I need it, but kind of understand the flow.

I have the following script to display a pre-loader while a web page is loading, it works but I wonder if it is OK or outdated or if there is a better way.

<script>
        document.onreadystatechange = function() {		
            if (document.readyState !== "complete") {
                document.querySelector(
                  "body").style.visibility = "hidden";
                document.querySelector(
                  "#loader").style.visibility = "visible";
            } else {						
                document.querySelector(
                  "#loader").style.display = "none";
                document.querySelector(
                  "body").style.visibility = "visible";
            }
        };				
    </script>

Basically I hide everything except the loader div while the page is loading and display everything except the loader div when page is loaded. The loader div contains an animated gif.

The second thing I want to do is to add a delay in the page load for testing purposes because locally it loads virtually instantly. Obviously I could link to a large file or image but I would rather use something a bit more intuitive like setTimeout() but am really not sure where to put it or if it will actually delay the page load as far as Javascript is concerned.

Thanks in advance guys

[veocode]

@kerry14

add a delay in the page load

You can use network throttling in Chrome Devtools (press F12 to open it) to emulate network latency

[kerry14]

@veocode
Yes thank you,
I have tried that but when I am running locally, selecting slow 3g or even defining a slow custom mode of say 1 kbit/s or 10,000 ms latency it still loads almost instantaneously. I would prefer a method where I can actually define a time delay, especially for demonstration purposes where I don’t want to tell a user how to slow down his browser in order to see what I have developed.

My question remains regarding how to amend my code to delay the page load rather than slow down the browser or load a very large file.

Thanks

[veocode]

Well the simpliest solution I can think of is to add some testing flag and add a delay depending on that flag:

document.onreadystatechange = function() {
    let loader = document.querySelector("#loader");
    let body = document.querySelector("body");
    let isTesting = true; // the testing flag
    
    if (document.readyState !== "complete") {
        body.style.visibility = "hidden";
        loader.style.visibility = "visible";
    } else {
        let delay = isTesting ? 2000 : 0; // add 2 seconds delay if testing
        setTimeout(() => {
            loader.style.display = "none";
            body.style.visibility = "visible";
        }, delay);
    }
};	

[kerry14]

@veocode
Hi
Thanks, as I say I am not very familiar with JavaScript, but that looks like what I want, just change the testing flag to true or false and set the timeout in ms - awesome. I will try it.

Sorry to be a pain but how about the rest of the code, is it acceptable because I have heard various opinions on hiding vs deleting elements and different methods of inspecting the DOM.

Thanks again SO MUCH for your kind assistance.

Kerry

[veocode]

@kerry14

how about the rest of the code

I’d say the code is too simple to be bad
There is nothing to improve