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.
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.
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.
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.
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
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.