JQuery

Em 18/05/2015 às 17:05h por Leonardo

Mostrar tela de loading antes de carregar conteúdo do site com JQuery

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

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

Já temos 7 comentário(s). DEIXE O SEU :)

Junior Oliveira

Olá muito boa dica, parabéns...
Uma dúvida, eu estou fazendo APP com webview no Android, então quando o usuário clica em algum botão
o sistema demora um pouco pra processar o POST. então eu queria ver se tu pode me ajudar a ativar esse carinha
junto com o POST da página....Por exemplo, quando clicamos em um botão, imediatamente o ícone da barra de navegação do navegador é acionado. QUeria que esse LOAD fosse ativado no mesmo momento, após o clic nos botões..é possível?

★★★★★DIA 05.04.19 10h231 GOSTEI :)RESPONDER

Marcos Martins

renilson mascarenhas

legal

★★★★★DIA 17.03.19 18h352 GOSTEI :)RESPONDER

Marcos Martins, eduardo benk

Osnir Estevam

Legal

★★★☆☆DIA 03.07.18 13h371 GOSTEI :)RESPONDER

Marcos Martins

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 12h191 GOSTEI :)RESPONDER

Leonardo Martins

Paulo Ricardo

gostei

★★★★★DIA 30.10.16 12h431 GOSTEI :)RESPONDER

Leonardo Martins

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 16h010 GOSTEI :)RESPONDER

N/A

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 08h020 GOSTEI :)RESPONDER

N/A