Mostrar tela inicial uma vez por sessão com jQuery ... homepage "piscando" durante o carregamento

Question

Mostrar tela inicial uma vez por sessão com jQuery ... homepage "piscando" durante o carregamento

votos

42

Eu estou tentando fazer uma tela de intro / respingo aparecer apenas uma vez por sessão em meu homepage. Eu tenho que trabalhar com o script abaixo, mas ele flashes da página inicial rapidamente antes de executar o respingo / introdução da carga inicial do site (site carrega subseqüentes não mostrar a div como queria / necessário)

Eu tenho uma div com uma classe de .splash_section escondido inicialmente & Estou executando o script incluído abaixo.

Pergunta: Existe uma maneira melhor para escrever o roteiro, ou simplesmente uma maneira de impedir que a página inicial ou corpo de forma rápida piscando antes de os shows de introdução?

$(document).ready(function(){

if (sessionStorage.getItem('splash') !== 'true') {
$('.splash_section').show()
sessionStorage.setItem('splash','true');
}

});

Agradeço por qualquer ajuda desde já.

jquery html

Publicado 21/11/2015 em 02:01
usuário Brandon Vaughn

Em outras línguas...

2 respostas

votos

0

Desde $(document).readyfogos de retorno de chamada quando todos os elementos da página são analisados, a sua melhor aposta é a de colocar o elemento respingo no topo do corpo e executar o script com essa função logo após isso. Dessa forma, ele irá carregar os metadados a partir da cabeça, carregar o conteúdo respingo e exibi-lo imediatamente antes de quaisquer outros elementos DOM são carregados.

Algo assim:

<body>
    <div class="splash_section"></div>
    <script>
    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show()
        sessionStorage.setItem('splash','true');
    }
    </script>
    ...

Respondeu 21/11/2015 em 02:13
fonte usuário Shomz

Vince · Accepted Answer · 2015-11-21 02:11

votos

2

O autor da pergunta observou essa resposta como a melhor.

Também gostaria de ocultar o conteúdo da home page inicialmente, usando css:

.home-page {
    display: none;
}

Em seguida, mude seu script:

$(document).ready(function(){

    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show();
        sessionStorage.setItem('splash','true');
    }
    else {
        $('.home-page').fadeIn();
    }    
});

Respondeu 21/11/2015 em 02:11
fonte usuário Vince