1
I would like to put a loading screen with .gif on my page .html, because the page is very heavy. Please, if anyone can help me I will be very grateful.
Page be added the loading screen: http://natupote.net16.net/
1 answer
3
There are several ways to do this, but it is common to have a container visible on the page, which is removed until the document loads completely (it may be different according to the type of website navigation).
When I refer to the "container", I refer to the element that contains the visible content while the page is still loading, where you would place an image *.gif as expected.
If it were that way you would have to hide the content of the page that is still uploading, simply with display: none in CSS, hence, when the document is finally loaded, you can display again.
*... It would be good to put the content of the page in a container...*
Now, here is the example (this code would be better at the end of "body", because there the elements would have been declared before):
(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 */
})();
})();
Browser other questions tagged javascript html bootstrap
You are not signed in. Login or sign up in order to post.
Of the one look at this post will give you an idea of what to do.
– Neuber Oliveira
Dude, I’m not noticing slowness when opening the page. The slowness apparently is because of the latency of your hosting service’s answer.
– viana