3

Gostaria de colocar uma gif de loading no meu site. Quando eu acessar a página antes de abrir o site, primeiro abriria o gif e ficaria por 1,5 segundos mais ou menos. Isso é possível?

Obs: Quero algo mais ou menos assim http://ivang-design.com/chronos/videoyt/

4

4 Respostas 4

3

Fazer isso é extremamente simples e pode ser feito tanto pelo tempo de 1,5 segundos, como apenas desaparecer quando concluir o carregamento.

<img src='loading.gif' id='loader'/>

<script>setTimeout(function(){ loader.style.display='none'; },1500);</script>

O evento setTimeout define que após o tempo "1500" milisigundos = 1,5 segundos, a imagem ira desaparecer. Pois ao declarar que o objeto (pelo seu id) "loader", recebe o método style, o qual possui o parâmetro display com seu atributo 'none', que é invisível.

Ou pelo carregamento mesmo:

<img src='loading.gif' id='loader'/>

<script>window.onload= function(){ loader.style.display='none'; }</script>

O evento window.onload executara a função a ela atribuída.

1
  • Pode atribuir a imagem style="position:fixed;z-index:10000;left:44%;top:43%;", logo após o ID para posiciona-lo no centro e acima dos objetos. dependendo do tamanho da imagem e/ou do navegador isso pode variar. isso é um exemplo, precisa testar e validar com sua imagem se a posição esta adequada. Commented 29/05/2015 às 12:20
1

O plugin que você quer é o Royal Pre Loader.

Uma dica que eu dou é pesquisar no código do site, no meu caso uso o Chrome, eu entro no Dev Tools, vou na aba Source e procuro nas pastas relacionadas com Javascript, no seu caso está na pasta "/js".

Os outros navegadores também possuem esse recurso para inspecionar elementos, então sempre quando achar um efeito diferente, antes de tudo dá uma olhada no código do site.

1

Faça sem recursos externos e com um efeito fade:

HTML

<div id="preload" class="preload"></div>

CSS

.preload{
    position: fixed;
    z-index:99999;
    top:0; left:0;
    width:100%; height:100%;
    opacity:1;
    background-color:#000;
    background-image:url('../images/721.gif');
    background-position:50% 50%;
    background-repeat:no-repeat;
}

JS

window.onload = function(){
    var div = document.getElementById('preload');
    preload(div, 50);
};
function preload(el, interval){
    var op = 1;
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            el.style.display = 'none';
            el.className = '';
        }
        el.style.opacity = op;
        op -= op * 0.1;
    }, interval);
}
0

Existe um opção em JQuery bem simples.
Utilizando dos exemplos já citados:

JQUERY

$(document).ready(function() {
  setTimeout('
              $("#preload").fadeOut(100);
  ', 1500);
});

Quando a página for completamente "lida" a div desaparecerá. O fadeOut(100) fará com que a div desapareça de forma "suave" em 100 milissegundos. Veja mais acerca do fadeOut aqui: http://api.jquery.com/fadeout/

A contagem do setTimeout também é em milissegundos, então se você quer 1,5 segundos, basta multiplicar por 1000, no caso 1500.

CSS

body {
  background: #cccccc;
}
.preload {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #fff;
  background-image: url('https://38.media.tumblr.com/bec5933eea5043acf6a37bb1394384ab/tumblr_meyfxzwXUc1rgpyeqo1_400.gif');
  background-size: 298px 298px;
  background-position: center;
  background-repeat: no-repeat;
}

No background-position basta colocar center. O z-index: 99999, fará com que a div sempre esteja acima de todos os outros elementos da página contanto que eles possuam um z-index inferior a "99999".

HTML

<div id="preload"></div>

Veja o resultado aqui: http://jsfiddle.net/SamirChaves/6ns0grm0/2/

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 .