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

Question

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.

jquery html

Publicado el 20/11/2015 a las 23:01
por usuario Brandon Vaughn

En otros idiomas...

2 respuestas

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 Shomz

Vince · Accepted Answer · 2015-11-20 23:11

votos

2

El propietario de la pregunta aceptó esta respuesta como la mejor.

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 Vince