Curso de Design Responsivo Aula 25 Criando tela de loading antes de carregar o site com jQuery

Nessa vídeo aula vamos aprender 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.

Código CSS desenvolvido na vídeo aula

.corpo {
    display: none
}
.carregando {
   position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('http://i.imgur.com/zAD2y29.gif') 50% 50% no-repeat white;  
}

Código JavaSctipt desenvolvido na vídeo aula

$(window).on('load', function() {
     document.getElementById("carregando").style.display = "none";
     document.getElementById("corpo").style.display = "block";
});

$(window).load()

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

Uma função interessantes do Javascript que também podemos utilizar para definir um tempo, é a setInterval com ela podemos definir um intervalo de tempo que um evento irá acontecer, assim nosso site só será exibido apos atingir o tempo definido.

Código JavaSctipt desenvolvido na vídeo aula

var i = setInterval(function () {
    clearInterval(i);
    document.getElementById("carregando").style.display = "none";
    document.getElementById("corpo").style.display = "block";

}, 5000);

 



Hospedagem Profissional de Sites