假装预加载器屏幕

Question

I make a preloader page using valid tutorials for my webpage,
similar to https://codepen.io/bommell/pen/OPaMmj . the problem is I want to make this preloader work somehow fake, without using any heavy contents pics nor videos (iframe .....) In other words, I want to make this preloader a default screen before my actual project, so in js file, I use setTimeout and clearTimeout but it doesn't work, what should I do?
the preloader works properly whenever I use Iframe or other tricks

function myFunction() {
    myVar = setTimeout(function(){ document.body.addClass("loaded"); }, 3);
  }

  function myStopFunction() {
    clearTimeout(myVar);
  }

can anyone help me faking the preloading screen?

Answer 1

setTimeout tells the browser to perform an action after the specified amount of time. (The unit is miliseconds - 3ms might be a bit short).

clearTimeout tells the browser to cancel the action you set up with setTimeout .

What you seem to be trying to do is adding the "loaded" class to body , so there is no need to use clearTimeout :

setTimeout(function(){ document.body.classList.add("loaded"); }, 3000);

will add the "loaded" class after three seconds.

Answer 2

First, create a loader. It might just be an image with an infinite rotate on it by css, it might be complete overlay 1 z-index higher than that of your current content. Whatever it is, doesn't really matter, just that it can obscure your 'loading' content. Give this div an id, ie loader.

Second, when everything loads, hide the loader, delete it if you want to.

window.onload = function () {
   document.getElementById("loader").style.display = "none"; //HIDE THE ELEMENT
   document.getElementById("loader").style.remove(); // COMPLETELY REMOVE IT
}