I'm trying to create a label , which appears while the page is loading, with a "a carregar" .
And once the page loads, hide the label .
My code is as follows:
document.getElementById("lblmsg").innerHTML = "carregar...";
for(var i=1; i>1000; i++){
var value = i*i*i*i;
}
function callFunction(){
document.getElementById("lblmsg").style.display = 'none';
}
and HTML:
<body onload="callFunction();">
<label id="lblmsg"></label>
</body>
If you just need to "hide" your site content before load is triggered, you can use a class with this property that you are inserting directly into the DOM, / p>
.hide { display: none }
Content to be "hidden" while the page loads may initially have this class. Just remove it when load is fired.
ps: I put an image to the 'load' to be triggered on a first load.
var loading = document.querySelector('div'),
content = document.querySelector('main');
window.onload = function() {
loading.classList.add('hide'); // esconde o 'carregando'.
content.classList.remove('hide'); // mostra o conteúdo do site.
};.hide, img { display: none }<div>
<p>carregando...</p>
</div>
<main class='hide'>
<img src='http://i.stack.imgur.com/uoKIw.jpg' />
conteúdo do site.
</main> In the example above I used classList but I already added that not all browsers have this feature implemented. Internet Explorer < 10 and Opera Mini 5 do not support classList - view browsers that support . However in this answer (en) there are possible solutions that you can use.
If you want to display a progress bar as the site loads (showing the percentage), I suggest using PACE / a> for this.
Do as follows:
<body>
<label id="lblmsg">Carregando...</label>
</body>
<script>
window.onload = callFunction;
</script>
In this case, window.onload causes this function to run after the entire page has been loaded.
It's better to leave the entire encoding in a script or a arquivo javascript tag. It is easier to maintain the code.
And I think in this case, the best choice is to leave the word Carregando... within the label#lblmsg , and then when the content is loaded, hide it.