Executar animação enquanto a a tela carrega

[Micilini Roll 49]

Seguinte pessoal eu quero fazer uma animação (tela de carregamento) enquanto a tela nao carrega todos os elementos.

 

Eu pensei no seguinte, irei colocar uma tag no body chamada onload, que ira executar uma função que irá:

 

• Criar um plano de fundo por cima da tela que esta carregando
• Apareçera 1 texto que estará escrito a porcentagem de 0% a 100% do carregamento da tela

 

 

Eu tenho 2 perguntas:

 

1. Se colocarmos um plano de fundo por cima da tela que esta carregando (z-index) isso nao irá anular o carregamento da tela que esta por tras desse plano de fundo?
2. Como eu poderei obter a porcentagem de carregamento?

[Fiote 24]

Dica: onload acontece quando a load termina. Você parece achar que a função do onload será chamada ANTES de tudo carregar, e é exatamente o contrário.

[Micilini Roll 49]

Então neste caso deverei usar o ready do jquery para iniciar a animação, e em seguida o onload para finalizar a animação, entendo... +1 pra voce!

 

 

 

jQuery(document).ready(function(){  });

 

 

Voltando ao assunto principal:

 

1. Se colocarmos um plano de fundo por cima da tela que esta carregando (z-index) isso nao irá anular o carregamento da tela que esta por tras desse plano de fundo?
2. Como eu poderei obter a porcentagem de carregamento?

[Fiote 24]

Se colocarmos um plano de fundo por cima da tela que esta carregando (z-index) isso nao irá anular o carregamento da tela que esta por tras desse plano de fundo?

 

De maneira alguma. Tudo acontece/carrega ao mesmo tempo. A não ser que você use plugins específicos que só são 'ativados' quando os elementos estão visíveis na tela (por top/left absoluto e z-index), mas acho implrovável que você use, haha.

 

omo eu poderei obter a porcentagem de carregamento?

 

Html puro carrega de forma instantânea. O que tem na sua página que demora carregar assim? Imagens vídeos, requests ajax etc.

[Micilini Roll 49]

Html puro carrega de forma instantânea. O que tem na sua página que demora carregar assim? Imagens vídeos, requests ajax etc.

 

 

Algumas imagens estão em alta definição e outras em baixa (sim o usuario pode definir se quer visualizar o site em full hd ou no modo normal) (e as imagens todos estao em 1920x1080, elas nao sao estaticas pois o website é gradual e se adapta a qualquer resolução) o problema é mais nas imagens mesmo.

 

Tem alguma solução ai?

 

Bem eu estava pensando aqui em uma solução e pensei da seguinte forma: eu nao conheço nenhum plugin que faça isso ou talvez um comando que me mostre este tipo de coisa, mas veja a minha ideia:

 

1. A primeira coisa que nos devemos fazer é descobrir o tamanho da pagina inteira
2. Logo em seguida, eu tenho um codigo que pega a velocidade da internet do usuario em kb/s
3. O que farei é o seguinte, irei ficar testando a velocidade de internet do usuario com um arquivo de 1kb (mesma coisa que o rj net velocimentro faz, so que com um arquivo de 10kb).
4. Logo em seguida irei pegar a velocidade que o codigo me mostra e irei enviar para uma função
5. Esta tal função irá realizar uma especie de calculo, que ira pegar to tamanho da pagina e calcular com o tamanho de kb por segundo, fazendo com que retorne a porcentagem de carregamento

 

So que ai haverá um problema, e se a conexao do usuario ficar mais baixa do que a anterior, consequentemente a porcentagem ficará dessa maneira:

 

 

0% - 4% - 10% - 4% - 15%

 

Ou seja a porcentagem vai diminuir e isso vai ficar um pouco estranho, para resolver isso no final de cada calculo nos devemos comparar com o novo resultado com o antigo e se ele for maior que o antigo ele mostra na tela, se nao.. nos iremos pausar e continuar mostrando o resultado antigo ate que ele seja maior que o resultado novo....

[Fiote 24]

 

Calmae amigo, lol. O problema são as imagens, certo?

 

Uma sugestão: Ao invés de setar o src dessas imagens, use um atributo customizado (ou o name caso não esteja sendo utilizado). E adicione uma classe também para diferenciar essas imagens do resto (ex: posload).

 

Então ao invés de:

<img id='img1' class='meucss' src='gigante001.png'/> <img id='img2' class='meucss' src='gigante002.png'/>

Você teria:

<img id='img1' class='meucss posload' name=gigante001.png'/> <img id='img2' class='meucss posload' name='gigante002.png'/>

Logicamente, isso vai fazer com que as imagens NÃO carreguem.

 

Agora faça algo assim no seu onload.

 

// definindo algumas variáveis sem escopo
qtde_carregada = 0;
qtde_total = null;

// funcão a ser chamada no onload
function carregaImagens() {
    // buscamos todas as imagens com a classe especifica
    var imgs = document.getElementsByClassName('posload');
    qtde_total = imgs.length;

    // iteramos todas as imagens
    for (img in imgs) {

        // criamos uma imagem auxiliar
        var aux = new Image();

        // setamos o evento onload pra essa imagem
        aux.onload = function () {
            // incrementa a qtde_crregada
            qtde_carregada++;

            // calcula a % carregada (você pode fazer o que quiser com esse número)
            var pr_carregado = qtde_carregada * 100 / qtde_total;

            // quando todas as imagens estiverem carregadas, atualizamos tudo
            if (pr_carregado == 100) atualizaImagens();
        }
        aux.set('src', img.name);
    }
}


function atualizaImagens() {
    // agora que todas as imagens foram carregadas, simplesmente setamos o src delas
    // como já está tudo em cache, o load das imagens verdadeiras será instantâneo
    var imgs = document.getElementsByClassName('posload');
    for (img in imgs) img.set('src', img.name);
}

 

[Micilini Roll 49]

Entendi, eu estava vendo aqui a sua ideia e ela funciona perfeitamente, no caso pelo que eu pude entender é que voce fez o seguinte:

 

• Fez uma especie de orientacao nas imagens, fazendo com que elas fossem carregadas por tras do codigo, e sendo setadas automaticamente logo apos o carregamento das mesmas.

 

No caso, eu nao sei se da para implementar uma especie de calculo para tentar pegar a porcentagem de conclusão, pois necessito dessa porcentagem para aplicar em um progress bar, como este que voce esta vendo no website abaixo:

 

http://www.red-team-design.com/wp-content/uploads/2011/11/css3-slick-progress-bars-demo.html

 

No caso, voce pode ver ali em cima que tem algumas porcentagens e de acordo a barra de progresso vai crescendo ou diminuindo, por isso gostaria de saber quantos por centos ja foi carregado.

 

Seguinte, o seu codigo esta muito bom e é um boa carregar em background + 1 pra voce, mas no meu caso eu ainda vou continuar com a ideia que postei acima, pois no caso eu estou nao so carregando as imagens (principal) como tambem outros elementos (php,js,flash,...) esses outros elementos sao 20% do site, o restante é tudo imagem rsrs, alem de eu ter o controle do tamanho da pagina inteira e com isso mostrar ao usuario a porcentagem de carregamento real, o ruim disso é que vou ter que ficar calculando a velocidade de download de um arquivo 1kb , tudo bem que 1kb e pouca coisa, mas....

 

Vou deixar com voces o codigo que irei utilizar para fazer isso, ele nao é tao grande assim como no topico abaixo, pois so peguei as partes necessarias e alterei de imagem para .txt

 

http://forum.imasters.com.br/topic/490596-obter-o-tempo-gasto-para-carregar-imagem/

 

Bem vou tentar fazer aqui, e postar o resultado, mas se voces tiverem alguma ideia melhor eu agradeco...

[Fiote 24]

A primeira coisa que nos devemos fazer é descobrir o tamanho da pagina inteira

Você sabe que toda vez que mudar qualquer coisa na página (em todas as páginas que você pretende aplicar isso), você vai ter que recalcular né?

 

No caso, voce pode ver ali em cima que tem algumas porcentagens e de acordo a barra de progresso vai crescendo ou diminuindo, por isso gostaria de saber quantos por centos ja foi carregado.

Com o meu código você tem o percentual de imagens 100% carregadas (e não o percentual de quanto cada imagem já foi carregada), o que eu entendi que não serve pra você. Estava apenas tentando te dar uma opção aproximada.

 

 pois no caso eu estou nao so carregando as imagens (principal) como tambem outros elementos (php,js,flash,...)

Includes PHP fazem parte do pre-load da página e não como você mesurar o quanto já foi carregado, visto que o primeiro javascript só é executado depois que todos os includes já tiverem sido feitos (a não ser que você esteja falando de requests ajax).

 

Tags <script> no head/antes do body também fazem parte desse pre-load.

 

 

Provavelmente você já sabe disso tudo haha, mas não consigo pensar em mais nada pra te ajudar então. Boa sorte ae ;)

[Micilini Roll 49]

Voce parece entender bastante sobre javascript e linguagens para web. aprendi coisas novas +1 pra voce :yes: e olha que voce ja ganhou 4 pontos comigo so nesse topico hahaha

 

Eu entendi o que voce disse a cima, no caso, a unica coisa boa é que eu nao vou ter que ficar calculando as paginas a mao, pois tenho um outro arquivo que faz este tipo de coisa de automatico pra mim e insere no banco de dados.e sim, com relacao com o percentual de quanto cada imagem já foi carregada, era exatamente isso que eu queria :natalwink:

 

Tudo bem que eu posso ultilizar seu comando para carregar as imagens, e criar uma tela com uma animacao de carregamento "mentirosa" (aquelas que dizem estar carregando algo mas na vdd nao estão haha).

 

Vou Fazer o comando aqui e postar :flores: