伪造预加载器屏幕

Question

我使用适用于我的网页的有效教程制作了一个预加载器页面，
类似于 https://codepen.io/bommell/pen/OPaMmj。问题是我想让这个预加载器以某种方式假装工作，而不使用任何内容丰富的图片或视频（iframe .....）换句话说，我想让这个预加载器在我的实际项目之前成为默认屏幕，所以在 js 中文件，我使用 setTimeout 和 clearTimeout 但它不起作用，我该怎么办？
每当我使用 Iframe 或其他技巧时，预加载器都能正常工作

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

  function myStopFunction() {
    clearTimeout(myVar);
  }

谁能帮我伪造预加载屏幕？

Answer 1

setTimeout 告诉浏览器在指定的时间后执行操作。（单位是毫秒，3ms可能有点短）

clearTimeout 告诉浏览器取消您使用 setTimeout.

设置的操作

您似乎想做的是将 "loaded" class 添加到 body，因此无需使用 clearTimeout:

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

将在三秒后添加 "loaded" class。

Answer 2

首先，创建一个加载器。它可能只是一个无限旋转 css 的图像，它可能完全覆盖比您当前内容高 1 的 z-index。不管它是什么，都无关紧要，只是它会掩盖您的 'loading' 内容。给这个div一个id，即loader.

其次，当一切都加载完毕后，隐藏加载程序，如果你想删除它。

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

伪造预加载器屏幕

Faking preloader screen

html

javascript

css

preloader

settimeout