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á.

Publicado 21/11/2015 em 02:01
usuário
Em outras línguas...                            


2 respostas

votos
2

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

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

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more