伪造预加载器屏幕答案

【问题标题】：Faking preloader screen伪造预加载器屏幕
【发布时间】：2020-03-26 06:32:02
【问题描述】：

我使用有效的网页教程制作了一个预加载器页面，
类似于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);
  }

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

【问题讨论】：

你怎么称呼myFunction 和myStopFunction .... document.body（或与此相关的任何元素）没有addClass 方法
那我应该怎么调用呢？
是的，你应该调用这些函数

标签： javascript html css settimeout preloader

【解决方案1】：

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

clearTimeout 告诉浏览器取消您使用setTimeout 设置的操作。

您似乎正在尝试将"loaded" 类添加到body，因此无需使用clearTimeout：

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

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

【讨论】：

如果只有 html 元素实际上有一个 addClass 方法
@NoNameProvided - 是的，我知道，因为我使用它 - 但感谢您的课程
@Jaromanda X 和 @NoNameProvided 感谢您的宝贵时间和帮助

【解决方案2】：

首先，创建一个加载器。它可能只是一个由 css 无限旋转的图像，它可能是比您当前内容的 z-index 高 1 个 z-index 的完整叠加层。不管它是什么，并不重要，只是它可以掩盖你的“加载”内容。给这个div一个id，即loader。

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

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

【讨论】：

非常感谢，但如果您只是将代码添加到这行代码中： function myFunction() { myVar = setTimeout(function(){ document.body.addClass("loaded"); } , 3); } ------我试过了，没有解决问题
不应该这样。它不会与 setTimeout 一起使用。您应该独立使用它并取出 setTimeout。例如，在必须加载的实时 Web 应用程序中。如果你使用 setTimeout，那么它会在延迟设置后移除加载器。但是，如果您使用 window.onload，那么当且仅当整个页面本身已加载时，它才会删除加载器。即使对于假的预加载器，这也使它成为更好的实践，因为如果页面变得更复杂，它仍然很有用。