Blog

Em por

No tutorial de hoje, vou mostrar como criar uma tela de loading, antes de carregar o conteúdo do site, ou seja, o usuário irá visualizar somente uma imagem gif ou um texto, até que o site esteja totalmente carregado.

mostrar tela de loading

Primeiramente irei explicar qual a diferença entre o $(window).load() e o $(document).ready(), essa diferença é bem simples.

$(document).ready()

O mais conhecido $(document).ready() é utilizado para verificarmos se o DOM esta completamente carregado, caso ele esteja, podemos trabalhar tranquilamente com seus elementos, nesse caso, uma imagem não precisa estar completamente carregada, apenas precisamos ter o elemento da imagem no DOM.

$(window).load()

Já o $(window).load() é utilizado quando precisamos que TODOS os elementos estejam carregados, ou seja, ele vai esperar todas as imagens, css, javascript e elementos externos estarem carregados para ser executado.

Ai você me pergunta... qual dos dois utilizar? A resposta é simples, vai depender de sua necessidade, se você precisa manipular o elemento logo que ele carregar ou fazer algo depois que tudo estiver pronto.

No nosso exemplo eu preciso fazer algo (um evento) depois que nosso conteúdo estiver totalmente pronto, para podermos criar o efeito de que, enquanto aparecia à imagem de carregando site, nosso conteúdo estava sendo carregado e quando o site estivesse totalmente pronto, mostrava todo o conteúdo, interagindo assim com o usuário.

Vamos ao que interessa...

Criei nosso arquivo índex.php da seguinte maneira para exemplo, porém conforme for sua necessidade você poderá adaptá-lo da melhor maneira possível.

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>PÁGINA LOAD</title> <link rel="stylesheet" href="css/style.css" media="screen"/> <script src="js/jquery-2.1.3.js"></script> </head> <body> <div id="container"> <div id="loader"></div> <div id="content"> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> <img src="img/4k.jpg" width="100%" height="auto"/> </div> </div> </body> </html>

Agora adicionamos esse trecho JavaScript ao nosso índex.php, que será responsável pelo evento load da tela.

<script type="text/javascript"> // Este evendo é acionado após o carregamento da página jQuery(window).load(function() { //Após a leitura da pagina o evento fadeOut do loader é acionado, esta com delay para ser perceptivo em ambiente fora do servidor. jQuery("#loader").delay(2000).fadeOut("slow"); }); </script>

Pode haver algumas diferenças de comportamento pelos navegadores, isso não significa que seu código não está funcionando.

Para fazer o download do tutorial completo clique Aqui...

Dúvidas críticas ou sugestões comentem abaixo que termos o prazer em ajudá-los. laugh

Veja Também:

Artigos Relacionados a categoria: Blog

Olá, deixe seu comentário para Mostrar tela de loading antes de carregar conteúdo do site com JQuery

Já temos 4 comentário(s). DEIXE O SEU :)
George Tude

George Tude

Olá amigo, achei muito bom e simples o uso desse código, porém teria como eu fazer com que esse GIF carrega-se apenas uma vez quando acessa-se o meu site?
★☆☆☆☆ DIA 26.01.16 16h01 RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Olá amigo obrigado pelo comentário, então oque você talvez possa fazer é um controle através de sessão ou pelo BD, ou seja, se a pessoa entrar no seu site você cria uma session e faz a validação dela, se a session ja foi criada você não ativa a função, se não você exibe, esta seria uma maneira de realizar o procedimento que você quer!
★☆☆☆☆ DIA 01.02.16 08h02 RESPONDER
N/A
Enviando Comentário Fechar :/
Paulo Ricardo

Paulo Ricardo

gostei
★★★★★ DIA 30.10.16 12h43 RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
teste tt

teste tt

Dei uma modificada no código para carregar durante o carregamento da pagina:










PÁGINA LOAD







// Este evendo é acionado Antes do carregamento da página
jQuery(window).load(function() {
jQuery("loader"); });


























// Este evendo é acionado após o carregamento da página
jQuery(window).load(function() {
jQuery("loader").fadeOut("slow"); });







CSS


divcontainer{
position:absolute;
width: 100%;
height: 100%;
top: 0px;
left:0px;
background-color: eee;
display: block;
}
divloader {
position:absolute;
width: 100%;
height: 100%;
background-color: white;
background-image: url('../img/load.gif');
background-position: center center;
background-repeat: no-repeat;
}
★★★★★ DIA 18.11.16 12h19 RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora