Поддельный экран предзагрузчика

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 говорит браузеру выполнить действие через указанное количество времени. (Единица измерения составляет миллисекунды - 3 мс может быть немного меньше).

clearTimeout говорит браузеру отменить действие, которое вы настроили с помощью setTimeout.

То, что вы пытаетесь выполнить Для этого нужно добавить класс "loaded" к body, поэтому нет необходимости использовать clearTimeout:

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

добавит класс "loaded" через три секунды.

Answer 2

Сначала создайте загрузчик. Это может быть просто изображение с бесконечным поворотом на css, это может быть полное наложение на 1 z-индекс выше, чем у вашего текущего контента. Что бы это ни было, на самом деле не имеет значения, просто оно может скрыть ваш «загружаемый» контент. Дайте этому идентификатору div, ie loader.

Во-вторых, когда все загрузится, спрячьте загрузчик, удалите его, если хотите.

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