Eu estou com um site pronto e gostaria que o spinner aparecesse primeiro na página, enquanto o conteúdo em geral da página (imagens, textos, códigos e etc) terminassem de serem carregados totalmente, aí sim o spinner sumisse.
Existe está resposta semelhante Mostrar GIF enquanto página carrega, porém aqui é um efeito que não é exatamente "exato" já que aqui o conteúdo aparece após um determinado tempo que já foi pré-estabelecido.
O que pode acontecer da página levar 5 segundos para carregar e o efeito levar 2 segundos para terminar e não é isso que eu quero e sim, eu quero que o tempo do spinner que aparece na página seja relativo ao tempo que a página termina de ser carregada ou seja, só ocultasse quando a página carregasse não levando em consideração 5s, 7s, 10s ou 20s já que isso pode depender da conexão, servidor, computador, site e etc.
Abaixo está o código que eu estou usando:
let cont = 0;
let newElement = setInterval(() => {
let element = document.createElement("p");
++cont;
element.innerHTML = "Novo parágrafo";
content.appendChild(element);
if (cont >= 5) {
clearInterval(newElement);
}
}, 1000);
window.onload = () => {
let spinner = document.querySelector("#spinner");
spinner.style.display = "none";
};
#spinner {
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="spinner">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div id="content">
<h2>Este é o título</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit veniam non, obcaecati quaerat dolor corrupti error. Sapiente iste distinctio molestiae natus quisquam consequatur ut ullam consequuntur mollitia, repudiandae perferendis corporis.
</p>
</div>
</body>
</html>
Vejam que o spinner desaparece antes que a página seja totalmente renderizada, isso porque, o código da função setInterval()
ainda está criando os elementos (parágrafos) ou seja ainda não foi totalmente carregado a página para o spinner sumir.
O que acaba transparecendo que a função load
não está fazendo com que o spinner suma quando os arquivos sejam carregados já que é o que diz o site do MDN:
O evento de load é acionado quando um recurso e seus recursos dependentes terminaram de carregar.
Eu gostaria que independentemente de qual for o conteúdo (imagens, vídeos, textos, códigos e etc) que está dentro da página o spinner só sumisse quando de fato a página carregar 100% pelo contrário ele continuasse aparecendo na página.