You need to put the heavy content of your page into a container, a div for example, and the image loading into another one, like this:
<div id="carregando"></div>
<div id="conteudo">
... aqui vai o conteúdo do site ...
</div>
Then you display the div with the image and hide the div with the content.
In the evendo Document.ready, when the whole document is loaded, you invert, hide the image and display the contents:
<script type="text/javascript">
$('#carregando').show();
$('#conteudo').hide();
$(document).ready( function() {
$('#carregando').hide();
$('#conteudo').show();
});
</script>
The image you arrow in css, and leave with position: absolute
to position where you want:
#carregando {
background: url("http://i.stack.imgur.com/MnyxU.gif") center no-repeat;
position: absolute;
height: 100%;
widht: 100%
}
Basically that’s it.
take a look at the stop.
– Renan Gomes
Thanks @Renan ,you know there’s some way I could get the value of the progress? I can’t use a template from them...
– caiocafardo