Gostaria de colocar um loading screen com .gif
em minha pagina .html
, pois a pagina esta muito pesada. Por favor, se alguém puder me ajudar ficarei muito grato.
Página ser adicionado o loading screen: http://natupote.net16.net/
Gostaria de colocar um loading screen com .gif
em minha pagina .html
, pois a pagina esta muito pesada. Por favor, se alguém puder me ajudar ficarei muito grato.
Página ser adicionado o loading screen: http://natupote.net16.net/
Há várias maneiras de fazer isso, mas é comúm ter um container visível na página, qual é removido até que o documento se carregue completamente (pode ser diferente de acordo com o tipo de navegação do site).
Quando me refiro à "container", refiro ao elemento que contém o conteúdo visível enquanto a página está em carregamento ainda, onde você iria colocar uma imagem *.gif como esperado.
Se fosse dessa maneira você teria que esconder o conteúdo da página que está em carregamento ainda, simplesmente com display: none
em CSS, daí, quando o documento finalmente ser carregado, você pode exibir novamente.
*... Seria bom colocar o conteúdo da página em um container...*
Agora, aqui vai o exemplo (esse código cairia melhor no fim de "body"
, pois lá os elementos já teriam sido declarados antes):
(function() {
var loadingContainer = document.getElementById('loading-container');
var pageContainer = document.getElementById('page');
(function checker() {
// checa se o documento foi carregado
if (document.readyState === "complete") {
// remove o loadingContainer pelo seu parente
loadingContainer.parentNode.removeChild(loadingContainer);
// exibe a página
pageContainer.style.display = "block";
} else setTimeout(checker, 20);
/* window.requestAnimationFrame poderia dar problemas */
})();
})();