Mostrar pantalla de bienvenida de una vez por sesión con jQuery ... página "intermitente" durante la carga

votos
42

Estoy tratando de hacer una pantalla de introducción / salpicaduras aparecen sólo una vez por sesión en la página de inicio. Tengo que trabajar con la secuencia de comandos a continuación, pero se flashes de la página de inicio rápido antes de ejecutar el chapoteo / introducción de la carga inicial del sitio (sitio cargas posteriores no muestran el div que se busca / es necesario)

Tengo un div con una clase de .splash_section inicialmente oculto y estoy ejecutando la secuencia de comandos se incluye a continuación.

Pregunta: ¿Hay una mejor manera de escribir el guión, o simplemente una manera de prevenir la página principal o cuerpo de forma rápida intermitente antes de los espectáculos de introducción?

$(document).ready(function(){

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

});

Gracias por cualquier ayuda de antemano.

Publicado el 20/11/2015 a las 23:01
por usuario
En otros idiomas...                            


2 respuestas

votos
2

También me ocultar el contenido de la página principal inicialmente, usando CSS:

.home-page {
    display: none;
}

A continuación, cambiar su secuencia de comandos para:

$(document).ready(function(){

    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show();
        sessionStorage.setItem('splash','true');
    }
    else {
        $('.home-page').fadeIn();
    }    
});
Respondida el 20/11/2015 a las 23:11
fuente por usuario

votos
0

Dado que $(document).readylos incendios de devolución de llamada cuando se analizan todos los elementos de la página, lo mejor es poner el elemento de salpicaduras en la parte superior del cuerpo y ejecutar el script con esa función justo después de ella. De esta manera se carga los metadatos de la cabeza, cargar el contenido de bienvenida y mostrar inmediatamente antes de cargar cualquier otro elemento DOM.

Algo como esto:

<body>
    <div class="splash_section"></div>
    <script>
    if (sessionStorage.getItem('splash') !== 'true') {
        $('.splash_section').show()
        sessionStorage.setItem('splash','true');
    }
    </script>
    ...
Respondida el 20/11/2015 a las 23:13
fuente por usuario

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