5

Existe alguma forma de usar o JavaScript/jQuery pra medir o carregamento de uma página e exibir uma imagem .GIF até a mesma ser carregada?

Vejo exemplos, como Preloader CSS3, que usam apenas CSS3, o que me faz pensar que o carregamento é feito de uma forma "falsa", vendo que CSS3 não tem capacidade de verificar se a página foi carregada ou não (até onde meu conhecimento de CSS3 vai), mas de qualquer forma, o tutorial é muito incompleto e pelo visto não funciona em IE.

Lembrando que não é interessante para mim exibir a página até a mesma ser carregada. E seria de meu interesse que isso se aplique a todas as páginas. Vendo que o tempo de espera é real, não vejo o porque de mostrar a página sendo carregada.

1 Resposta 1

5

Se a sua página está precisando de uma barra de progresso, talvez seja possível reduzir os arquivos mais pesados ou otimizar processos custosos.

De fato, não é possível usar CSS para nada do tipo, apenas exibir animações de duração fixa. Mesmo com JavaScript e HTML, não é possível calcular o volume exato de dados que já foram carregados do total. Na verdade, isso nem seria necessário, já que a própria barra de progresso do navegador cumpre este papel.

Se a a página for pesada por causa da quantidade de imagens, dá para simular algo semelhante com Progress.js (página em inglês). Este script exibe uma barra de progresso, calculado com base nas imagens que já foram carregadas.

Talvez dê para adaptar o script para exibir progresso em uma imagem, como um GIF, mas a princípio é uma caixa de texto (customizável) com o valor em porcentagem:

inserir a descrição da imagem aqui

Outra forma de determinar o progresso seria colocar trechos de JavaScript em diferentes partes da página, que incrementem uma variável global. Por exemplo:

porcentagem += 10; atualizarProgresso();

Mas este método é ainda mais impreciso que o anterior, já que o código seria disparado assim que os arquivos fossem abertos pelo navegador, não tendo necessariamente seu conteúdo carregado por completo.

Independente da barra de progresso, é possível ocultar a página durante o carregamento utilizando uma máscara, como jquery-loadmask (página em inglês):

inserir a descrição da imagem aqui

Fonte: pergunta do Stack Overflow em inglês

0

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 .