伪造预加载器屏幕

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，即loader。

其次，当所有内容加载后，隐藏加载程序，如果需要的话可以将其删除。

window.onload = function () {

   document.getElementById("loader").style.display = "none"; //HIDE THE ELEMENT

   document.getElementById("loader").style.remove(); // COMPLETELY REMOVE IT

}