0

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.

1 Resposta 1

1

let cont = 0;
let executandoInterval = true;
let executandoOnload = true;
let newElement = setInterval(() => {
    let element = document.createElement("p");

    ++cont;

    element.innerHTML = "Novo parágrafo adicionado com setInterval";
    content.appendChild(element);

    if (cont >= 5) {
        executandoInterval = false;
        clearInterval(newElement);
        if (!executandoOnload) {
            // onload mais rápido que os 5 segundos do setInterval
            let spinner = document.querySelector("#spinner");
            spinner.style.display = "none";
        }
    }
}, 1000);

window.onload = () => {
    executandoOnload = false;
    if (!executandoInterval) {
        // onload mais lento que os 5 segundos do setInterval
        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">
    <p>
      Parágrafo já carregado
    </p>
  </div>
</body>

</html>

O problema é que o setInterval faz com que o conteúdo seja executado de forma assíncrona, no seu caso levará pelo menos 5 segundos para executar clearInterval.

O evento onload da página pode ou não ser executado antes desses 5 segundos, e não vai levar em consideração esse carregamento dos parágrafos (ou qualquer outro conteúdo) sendo executado em paralelo. Para resolver o problema incluí duas variáveis novas:

executandoInterval será verificada no evento onload da página e só irá deixar ocultar o spinner se tiver o valor false, atribuído como false quando executa clearInterval.

executandoOnload será verificada quando se executar o clearInterval e só irá deixar ocultar o spinner se tiver o valor false, atribuído como false quando se executa o evento onload.

Quem executar por último (window.onload ou clearInterval), oculta o spinner.

Comentei (removi) a aplicação do css, pois ele cobria toda a página como uma modal. Fica mais fácil de visualizar o funcionamento do código aqui na opção de executar do site sem ele. Sei que o exemplo aqui é didático, mas para uma aplicação do mundo real, não faz sentido carregar conteúdo de forma assíncrona e enquanto esse conteúdo não é carregado, bloquear a página, o usuário pode querer navegar por outros links da página, antes mesmo do fim da inclusão do conteúdo com setInterval.

2
  • 1
    Era isso mesmo que eu esperava, vlw! Não entendo porque negativaram a pergunta e resposta sendo que ambas estão dentro do padrão do stackoverflow.
    – Leandro
    Commented 3/02/2022 às 18:32
  • 1
    @Leandro ainda bem que a resposta ajudou.
    – Benilson
    Commented 3/02/2022 às 18:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .