Faking preloader screen

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"类添加到body，因此不需要使用clearTimeout：

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

将在三秒钟后添加"loaded"类。

Answer 2

首先，创建一个加载器。它可能只是css在其上无限旋转的图像，它可能比当前内容完全覆盖1 z索引。无论是什么，都没有关系，只是它可以遮盖您的“正在加载”内容。给这个div一个ID，即加载器。

第二，当所有内容加载完毕后，隐藏加载程序，如果需要，将其删除。

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