I'm doing a hotsite, it's one page, and it's a bit heavy with some images. I wanted to preloader with%, before loading all the content.
With:
$(window).on('load', function() {
alert('carregou');
})
I can tell when the whole site has loaded, but how do I check the percentage before that?
One way to do this is to put all the essential JS code in <header> of the browser, so that it is necessarily loaded even before the rest of the page is mounted, and put all non-essential JS at the end of <body> , meaning that they will only be loaded in the end.
An interesting variant would be require.js to load the JS files dynamically and asynchronously.
Take a look at my retro-game-editor project, it has some heavy scripts and uses require .js to dynamically load what it needs; has even a lightweight preloader implemented. GitHub repository: link
Already to implement a progress bar, it would be more complicated but perfectly possible. Maybe this post will help you, in part: link
You need to put the heavy content of your page in a container, a div for example, and the image of loading in another, 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 document.ready, when the whole document is loaded, you reverse, hide the image and display the content:
<script type="text/javascript">
$('#carregando').show();
$('#conteudo').hide();
$(document).ready( function() {
$('#carregando').hide();
$('#conteudo').show();
});
</script>
The image you arrow in the 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.
Well, I ended up using Pace, more details here