6

Estou fazendo um hotsite, ele é one page, e é um pouco pesado, com algumas imagens. Queria fazer um preloader com %, antes de carregar todo o conteúdo.

Com:

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

Eu consigo saber quando o site todo carregou, mas como antes disso ir verificando a porcentagem?

2
  • 1
    dê uma olhada no pace. 31/10/2016 às 15:39
  • Valeu @renan ,sabe teria algum jeito de eu pegar o valor do progresso? não posso usar um template deles... 31/10/2016 às 16:23

3 Respostas 3

3

Uma forma de fazer isso é colocar todo o código JS essencial no <header> do browser, fazendo com que ele seja necessariamente carregado antes mesmo do resto da página ser montado, e colocar todos os JS não essenciais no final do <body>, significando que eles só vão ser carregados no final.

Uma variante interessante seria usar o require.js para carregar os arquivos JS de forma dinâmica e assíncrona.

Dê uma olhada no meu projeto retro-game-editor, ele tem uns scripts bem pesados e usa o require.js para carregar dinamicamente o que ele precisa; tem inclusive um preloader bem leve implementado. Repositório no GitHub: https://github.com/haroldo-ok/retro-game-editor

Já para implementar uma barra de progresso, seria mais complicado, mas perfeitamente possível. Talvez esse post lhe ajude, em parte: https://stackoverflow.com/a/34595289/679240

1
  • Desconhecia essa informação da prioridade no carregamento, achei que o resultado era o mesmo, gostei de saber. É uma informação útil.
    – Florida
    31/10/2016 às 15:19
2

Você precisa colocar o conteúdo pesado da sua página em um container, um div por exemplo, e a image de loading em outro, assim:

<div id="carregando"></div>
<div id="conteudo">
   ... aqui vai o conteúdo do site ...
</div>

Então você exibe o div com a imagem e esconde o div com o conteúdo. No evendo document.ready, quando todo o documento estiver carregado, você inverte, esconde a imagem e exibe o conteúdo:

<script type="text/javascript">
   $('#carregando').show();
   $('#conteudo').hide();


   $(document).ready( function() {
      $('#carregando').hide();
      $('#conteudo').show();
});
</script>

A imagem você seta no css, e deixe com position: absolute para posicionar onde você quiser:

#carregando {
   background: url("https://i.stack.imgur.com/MnyxU.gif") center no-repeat;
   position: absolute;
   height: 100%;
   widht: 100%
}

Basicamente é isso.

4
  • Isso eu sei, como disse na minha pergunta. Eu precisaria mostrar a % do carregamento, e não só colocar um preloader falso (um gif ou algo do genero) 31/10/2016 às 15:40
  • você só consegue colocar % se puder calcular o % de carga dos itens, uma chamada ajax por exemplo, só link de referência de imagem não dá pra fazer isso. Se for uma sequência de chamadas ajax basta calcular o % de cada uma e alterar no div com aguarde. Agora se você já sabia como exibir o aguarde, poderia ter dito dito antes, dai eu postaria outro conteúdo. 31/10/2016 às 15:44
  • Oi, desculpa se minha pergunta não foi clara, mas eu coloquei tudo isso nela. 31/10/2016 às 15:47
  • Tranquilo, só quis dizer sobre a parte de mostrar a imagem, é que no seu código não aparece, por isso coloquei na resposta. 31/10/2016 às 15:55
1

Bom, acabei usando o Pace, mais detalhes aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .