Precargar y ejecutar jQuery/javascript antes de ver la página

Question

Estoy trabajando en un proyecto donde hay bastante jQuery. Así que cuando voy a la página, puedo ver el jQuery en ejecución (por ejemplo, $.button() elementos en la página todavía aparecen como elementos html normales antes de que se cargue jQueryUI: S) así que inicialmente parece todo feo, una vez que todo el JS está cargado y ejecutado, se ve "agradable".

No es solo un caso de precarga de imágenes o lo que sea, quiero ejecutar el código jQuery, pero "ocultarlo" a los visitantes para que una vez que se abra, se vea "bien" directamente O muestre una pantalla negra diciendo "Cargando ..." hasta que jQuery haya terminado de ejecutarse.

Mira, pero no estoy seguro de que realmente ejecute el javascript del sitio antes de mostrarlo, pero muestra la idea básica de tener una pantalla oscura que dice "Cargando ..." .. Sospecho que es lo que sucede en las grandes aplicaciones web tales como SlideRocket pesar de que hace uso del flash ...: S

Answer 1

Ha respondido la pregunta a sí mismo. Tenga algún tipo de pantalla de carga que oculte la página hasta que se ejecute todo el jQuery.

Pruebe algo como lo siguiente.

Esto va en la parte superior de la página:

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div> 

Aquí está tu jQuery:

$(document).ready(function() { 

    /* 
    * ... all of your jQuery ... 
    */ 

    // At the bottom of your jQuery code, put this: 
    $('#loadingMask').fadeOut(); 
}); 

Answer 2

Wrap toda su jQuery que desea "precargado" en esto:

$(window).load(function() { 
    //Your jQuery here 
}); 

o, alternativamente, no todos su código jQuery dentro de ese contenedor. Por el contrario, ponga sus cambios DOM de jQuery en

$(document).ready(function(){ 
    //jQuery 
})) 

y luego tenga un contenedor para todo el contenido de su sitio.

<div id="everything-wrapper"> 
    <!-- put your body here --> 
</div> 

y ajustar la pantalla a ninguno en tu CSS

#everything-wrapper { 
    display : none; 
} 

y luego con la carga ventana como antes

$(window).load(function() { 
    $("#everything-wrapper").show(); 
    // or 
    $("#everything-wrapper").fadeIn("fast"); 
    // to be fancy with it 
}); 

Answer 3

me gustaría tener un recubrimiento como parte de su CSS estática y HTML, entonces cuando las cargas JQuery a través

$(document).ready() puede ocultar la superposición

Answer 4

la respuesta por Chr istopher es probablemente la forma en que FilamentGroup lo hace. Puede tener javascript "precargado", carga en línea con el resto de la página y, debido a que generalmente es más grande que el resto de la página, tarda más en descargarse. No puedes hacer que javascript se cargue primero, esa no es la forma en que funciona.

Sin embargo, el principio para hacerlo funcionar es "ocultar" su página de vista en CSS (o con estilos en línea ya que el CSS todavía tendrá que cargarse) y una vez que todo esté listo en javascript muéstrelo de nuevo. Si observa que hay un espacio entre la página que muestra (nada) y la carga de javascript que se muestra en FilamentGroup.Esto se debe a que ocultan la página, el cargador de JavaScript carga, y una vez que el resto del javascript ha terminado, oculta el cargador y muestra la página.

Answer 5

Amigo, le hice una muestra. Espero que te guste Uso algo como esto en mi propio sitio. http://jsfiddle.net/jMVVf/

Answer 6

Estaba teniendo un problema similar con un artefacto apareciendo brevemente durante cargas de página en IE8. La solución que utilicé fue cambiar la visibilidad del contenedor a oculto en la línea 1 del css. Luego mostró el elemento al final del archivo jquery. Si css y jquery comienzan a discutir, el elemento no se muestra hasta que se resuelva el argumento.