tablas - obtener datos de una tabla html javascript

Ocultar página hasta que todo esté cargado Avanzado

Question

Tengo una página web que hace mucho uso de jQuery.

Mi objetivo es mostrar solo la página cuando todo esté listo.

Con eso quiero evitar mostrar la página molesta al usuario.

Intenté esto hasta ahora ( #body_holder es una envoltura dentro del cuerpo ):

$(function(){
    $(''#body_holder'').hide();
});
$(window).load(function() {
    $("#body_holder").show();
});

Esto funciona completamente bien, pero desordena el diseño.

El problema es que la ocultación del envoltorio interfiere con las otras funciones y complementos de jQuery utilizados (por ejemplo, layout-plugin).

Así que supongo que debe haber otro truco para hacer esto. ¿Tal vez colocar una imagen o div sobre el cuerpo hasta que se haya producido la ventana?

¿Qué enfoques utilizas?

EDITAR:

Lo más probable es que la solución tenga que ser otra forma que display:none o hide() ;

Answer 1

Aquí hay una solución jQuery para aquellos que buscan:

Oculte el cuerpo con css y luego muéstrelo después de cargar la página:

CSS:

html { visibility:hidden; }

JavaScript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

La página pasará de estar en blanco a mostrar todo el contenido cuando se cargue la página, sin flash de contenido, sin ver imágenes cargando, etc.

Answer 2

Debería intentar configurar la visibilidad como oculta en lugar de mostrar: ninguna. Establecer la visibilidad en oculto conservará todas las posiciones y dimensiones de los elementos, por lo que no debería crear problemas de diseño.

Answer 3

Si tiene un div #bodyholder, entonces puede poner display: none en su CSS para él y luego con jQuery do:

$(document).ready(function() {
     $(''#body_holder'').show();
});

No veo por qué ocultar un div debe interferir con la carga de cualquier cosa, porque todo lo que significa es que está oculto. Sin embargo, si tiene un montón de jQuery en uso, entonces asegúrese de envolverlo en $ (document) .ready, lo que asegurará que el DOM esté completamente cargado antes de que se ejecute Javascript

Un punto adicional es que HTML / CSS está diseñado para una carga progresiva, y si lo hace correctamente, puede obtener una buena carga progresiva de contenido para sus usuarios. Personalmente, no querría que mis usuarios obtuvieran una pantalla blanca durante unos segundos hasta que todo estuviera cargado. Mueva su Javascript al final de la página para que no bloquee la carga y obtenga contenido en la pantalla lo más rápido posible.

Answer 4

Su pregunta es válida, pero no me atrevería a esconder o cubrir la página mientras las cosas se complican.

Evita que el usuario entienda lo que está sucediendo en la página. Si bien es posible que se deban cargar muchas cosas, las diferentes partes de la página deberían cobrar vida a medida que se cargan. Debería ponerse en la práctica de bloquear los controles que no están listos, tal vez mostrando una flecha giratoria o algún otro indicador de progreso sobre ellos. O configurar el cursor para wait en la carga de elementos.

Esto mantiene al usuario al tanto y le permite ver e interactuar con las partes a medida que se conectan, en lugar de ocultarlas hasta que todo esté listo.

Normalmente querrá cargar las cosas que el usuario necesita para el acceso más rápido, por lo general, cosas por encima del pliegue, primero. La carga es una prioridad que puede coordinarse fácilmente con Promesas.

Al menos, ver la página le permite al usuario orientarse y decidir qué hacer. Se transparente

Answer 5

Todo lo que se haga con jQuery normalmente tendrá que esperar a document.ready, lo cual es demasiado tarde en mi humilde opinión.

Ponga un div en la parte superior, como así:

<div id="cover"></div>

establecer algunos estilos:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

y escóndalo con JS cuando todos los elementos estén cargados:

$(window).on(''load'', function() {
   $("#cover").hide();
});

O si, por alguna razón, su script usa un tiempo aún más largo, entonces los elementos DOM para cargar, establezca un intervalo para verificar el tipo de función que carga la más lenta, y retire la cubierta cuando todas las funciones estén definidas.

$(window).on(''load'', function() {
    $("#cover").fadeOut(200);
});

// does not fire the window onload properly, substituted with fake load

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>simple</li>
    <li>test</li>
    <li>of</li>
    <li>a</li>
    <li>cover</li>
</ul>

<div id="cover">LOADING</div>