Preloader while the site loads

Asked

Viewed 3,450 times

6

I’m making a hotsite, it’s one page, and it’s a little heavy, with some pictures. I wanted to do a preloader with %, before loading all the content.

With:

$(window).on('load', function() {
alert('carregou');
})

I can know when the whole site uploaded, but how before that go checking the percentage?

javascript jquery html
  • 1

    take a look at the stop.

  • Thanks @Renan ,you know there’s some way I could get the value of the progress? I can’t use a template from them...

3 answers

3

One way to do this is to put all the essential JS code in the <header> browser, making it necessarily loaded before even the rest of the page is mounted, and placing all non-essential JS at the end of the <body>, meaning they will only be loaded at the end.

An interesting variant would be to use the require js. to load the JS files dynamically and asynchronously.

Take a look at my design retro-game-editor, it has some very heavy scripts and uses require.js to dynamically load what it needs; it even has a very light preloader implemented. Repository on Github: https://github.com/haroldo-ok/retro-game-editor

Already to implement a progress bar, it would be more complicated but perfectly possible. Maybe this post will help you, in part: https://stackoverflow.com/a/34595289/679240

  • I was unaware of this information of the priority in the load, I thought the result was the same, I liked to know. It is a useful information.

2

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.

  • I know this, as I said in my question. I would need to show the % of the shipment, and not just put a fake preloader (a gif or something like that)

  • You can only put % if you can calculate the per cent load of the items, an ajax call for example, only image reference link cannot do this. If it is a sequence of ajax calls just calculate the % of each one and change in the waiting div. Now if you already knew how to display the hold, could have said before, then I would post other content.

  • Hi, sorry if my question was unclear, but I put all this on her.

  • Relax, I just meant about showing the image, it’s that your code doesn’t show, so I put in the answer.

1

Well, I ended up using Pace, more details here

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.