12

Como obter o tamanho de uma página e o quanto ela foi baixada para calcular a porcentagem de seu carregamento. Mas gostaria de não usar nenhum framework, apenas JS puro.


Na verdade quero tentar isso.

1
  • Dê uma olhada no tour. Você pode aceitar uma resposta se ela resolveu seu problema. Você pode votar em todos os posts do site também. Alguma lhe ajudou mais? Precisa que algo seja melhorado?
    – Maniero
    Commented 16/07/2015 às 0:25

4 Respostas 4

8

Isto é virtualmente impossível. Não há nada pronto que permita fazer isto. O máximo que é possível é você criar um sistema que saiba o tamanho de cada arquivo que deve ser carregado e ir controlando a carga fazendo um progress bar entre os elementos, mas será bem falho. Não sei se vale o esforço, afinal se demora pouco essa informação tem pouca relevância, se demora muito, tem algo errado na página.

É possível que você esteja pensando em dar uma noção do tempo que falta para carregar, mas isto não dá para controlar.

Quer tentar isso? Fique à vontade. Tem essa outra. Não estou recomendando.

Coloquei no GitHub para referência futura.

2
  • Obrigado. Eu consegui fazer com o Ajax, porém só com mídias, html e texto puro não. O que eu queria era só mais uma interatividade mesmo na página, para o usuário saber que ainda não foi tudo carregado. Com o document.readystatechange se consegue fazer essa interatividade como no readystatechange do Ajax, porém não se consegue os Kb que foram carregados e tampouco o total.
    – rplaurindo
    Commented 18/11/2014 às 21:40
  • Seria possível você escrever então uma resposta e marcá-la como resposta aceita? Assim sua pergunta não fica sem uma resposta e você contribui com a comunidade.
    – durtto
    Commented 4/08/2015 às 13:34
4

O Maniero já respondeu muito bem a pergunta.

Se ainda assim você quiser insistir... Você pode espalhar diversos scripts pela página. Da seguinte forma:

<body>
    <div><!-- Inicialize seu contador aqui --></div>
    <script type="text/javascript">
        // Aqui você manipula o contador para contar 0%.
    </script>
    <!-- Aqui vem bastante conteúdo -->
    <script>
        // Mude o contador para, por exemplo, 10%.
    </script>
    <!-- Mais conteúdo... -->
    <script>
        // 20% agora.
    </script>
    <-- Já deu pra ver onde isso vai parar, né? -->
    <script>
        // Ok, vamos dar um 100% aqui.
    </script>
</body>

Lembre-se apenas de que programadores que fazem esse tipo de coisa não vão pro céu quando morrem. Eu sei que certos sites como o GMail têm barra de carga, mas mesmo nas conexões mais lentas isso é mais frescura e ruído do que algo útil. Não fazer esse tipo de coisa até contribui para a página carregar mais rápido.

-1

Como todos já falaram é complicado fazer isso, já que tu terás muito problema com performance no futuro. Esses loading de pagina normalmente é feito uma analise de DOM com a Jquery. Tu passas uma ID e quando ela carregar a JQUERY conclui a progress bar.

Eu nunca testei e nem fiz algo parecido, mas tu podes tentar pegar o valor do ai quando todo o HTML carregar o progress bar chega ao fim.

Então como falei acima, uma dica do que tu podes fazer é usar a Jquery e tentar algo como isso ou então isso aqui

-1

Como muitos apontaram, o que busca não é algo simples, talvez seja valido se quiser fazer uma tela de download/upload de arquivos grandes.

A primeira coisa que precisa fazer, é calcular o tamanho do seu HTML e setar o Header Content-Length, desta forma poderia utilizar o seguinte script.:

var req = new XMLHttpRequest();   
req.onprogress = function(evt) 
{
    if (evt.lengthComputable) 
    {  
        var progress= (evt.loaded / evt.total) * 100; 
    } 
};
req.open('GET', 'test.php', true);  
req.onreadystatechange = function (aEvt) {  
    if (req.readyState == 4 && req.status == 200) 
    {  

    }  
};  
req.send(); 

Ainda assim tem um ponto falho nesta abordagem, você não tem como saber quanto tempo o servidor vai demorar para processar a requisição.

A sua outra opção, talvez seja utilizando WebSockets, seja utilizando SignalR, SocketIO, Ratchet ou algo apropriado para a linguagem da sua preferencia.

Neste caso, a aplicação no lado do servidor deverá informar o cliente sobre o progresso realizado.

Em resumo, se não for utilizar em algo bastante especifico, desista desta ideia.

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 .