5

Tenho um código que faz uma animação de carregamento antes de iniciar uma página.

css.css

.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-image:url('https://media.giphy.com/media/ugEWbEMH0gm2c/giphy.gif');*/
    background-image:url('https://media.giphy.com/media/l4FGmQ3Ddqsp8LKKY/giphy.gif');
    background-size:70%;
    background-position:center;
    background-repeat:no-repeat;
}

index.php

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

logo após a tag body tem essa div que faz o carregamento da animação.

script.php

<script>
  $(document).ready(function(){
        $("#preload").fadeOut(1000);
      });
</script>

Minha dúvida é a seguinte: Porquê quando mudo o .ready para . load a animação fica infinita? E porque antes de carregar todas as imagens a animação some?

1 Resposta 1

6

O problema é que o document não tem um evento load, apenas a window. Veja o snippet abaixo.

$(window).on('load',function(){
        $('#preload').fadeOut(1000);
 });
.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-image:url('https://media.giphy.com/media/ugEWbEMH0gm2c/giphy.gif');*/
    background-image:url('https://media.giphy.com/media/l4FGmQ3Ddqsp8LKKY/giphy.gif');
    background-size:70%;
    background-position:center;
    background-repeat:no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preload" class="preload"></div>

Quanto à sua dúvida do carregamento das imagens, a animação tem um tempo definido, passado como parâmetro para a função fadeOut(). Quando a página carrega, a animação é executada no tempo definido. Se desejar um tempo maior, aumente o valor do parâmetro de 1000(tempo em ms) para a quantidade desejada.

EDIÇÃO

A partir da versão 3.0 do jQuery, houve uma mudança. Ao invés de usar window.load(), é necessário usar window.on('load',function () { //... }

3
  • Muito obrigado, não sabia que no document não tinha como usar .load(), do jeito que você deixou funciona, mas só com o jquery 2.1.1, eu uso o 3.3.1, e nele da loop. :/ 3/07/2018 às 12:16
  • @PedroHenrique, editado e resolvido. É sempre bom informar quais versões está utilizando. Se essa resposta resolveu seu problema, por favor, marque-a como solução.
    – reisdev
    3/07/2018 às 12:25
  • Muito obrigado, funcionou bem. 3/07/2018 às 12:55

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 .