¿Cómo sé cuando HTML ha rendido totalmente

caso 1:¿Cómo sé cuando HTML ha rendido totalmente

que carga una página HTML muy grande que incluye una gran cantidad de diseño complejo y las fuentes. La página tardará un tiempo desconocido en renderizarse.

el caso 2:

que utilizar la función de jQuery .html() para hacer cambios significativos en mi DOM. El DOM modificado tardará un tiempo desconocido para representarse.

En ambos casos, quiero ser capaz de cubrir toda la pantalla con una ruleta hasta que la página tenga renderizado completamente terminado.

En la búsqueda de respuestas a esta pregunta, he encontrado preguntas similares, pero las respuestas no son relevantes. Para ser claros:

No quiero saber cuándo está listo el DOM.

No quiero saber cuándo se han obtenido los datos HTTP.

Quiero saber cuándo todo en el DOM ha sido dibujado por completo a la pantalla.

Establecer el tiempo de espera del peor de los casos no es una solución aceptable.

Necesito una solución para navegadores basados en WebKit.

Fuente

2010-12-21 GroovyDotCom

Lo primero es fácil: use 'onload'. Este último no sé si es posible, está interesado en ver qué sucede. –

Desde el punto de vista de la usabilidad, cubrir toda la pantalla con un girador es IMO lo peor que puedes hacer. Hará que la carga larga parezca aún más larga. Solo mi 2 ¥. : o) – deceze

¿No puedes simplemente agregar un spinner al html básico y luego ocultar el spinner después de todo el javascript? –

Justo al lado de la parte superior de la cabeza, que podría hacer algo como esto:

var img_loaded; 
$(lastImg).load(function() { img_loaded = true; }); 

(function checkLoading() { 
    return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50); 
}());

Por supuesto, hay mucho mal con esto:

Se supone que un evento Image.onload funciona como lo hace normalmente (la imagen está completamente descargada y todo). Si Safari "engaña" en la ventana, ¿podemos confiar en ellos con imágenes?
Supone que la última regla en el archivo CSS se llevará a cabo (y se completará) al final. Supongo que si la última regla es un peso de fuente o algo así, y la penúltima regla está cargando una imagen de fondo MB, tampoco funcionará.
Requiere atención constante. Las diferentes partes deben actualizarse para diferentes páginas. Como es, no escala.

El artículo con el que se ha vinculado solo habla sobre Safari 3. ¿Todavía no podemos confiar en que Safari carga dos versiones más tarde?

Fuente

2010-12-21 02:30:11 sdleihssirhc

Para el caso que yo creo que se pueda utilizar:

<BODY onLoad="alert('Page Fully Loaded')">

Fuente

2010-12-21 07:58:31

Algo como esto debería funcionar con suerte:

... 
<head> 
    ... 
    <style type="text/css"> 
    #overlay { 
     background:url(../images/loading.gif) no-repeat 50% 50%; 
     display:none; 
    } 
    .loading #overlay { 
     display:block; 
     left:0; 
     height:100%; 
     position:absolute; 
     top:0; 
     width:100%; 
    } 
    .loading > #overlay { 
     position:fixed; 
    } 
    </style> 
    <script> 
    if (document.documentElement) { 
     document.documentElement.className = 'loading'; 
    } 
    </script> 
</head> 
<body> 
    .. 
    <div id="overlay"> 
    .. 
    </div> 
    <script> 
    $(document).ready(function() { 
     $('.loading #overlay').fadeOut(500, 
     function() { 
      $(document.documentElement).removeClass('loading'); 
      $('#overlay').remove(); 
     }); 
    }); 
</body> 
</html>

Fuente

2010-12-21 09:28:12

Sólo un pequeño punto; la mayoría de los navegadores no animarán un spinner mientras procesan el javascript. Particularmente los IEs que se comportan de un solo hilo.

Vale la pena utilizar un diseño diferente, no animado, para el 'spinner'. Algo así como un reloj de arena.

Pensado para su cuando se presenta el desafío: ¿por qué no poner algo después de su código de inicialización al que llama en su evento $ (documento) .ready. En el caso de IEs, debería disparar al final.

Fuente

2010-12-29 14:35:21 GlennG

Puede confirmar esto por experiencia: encuentra una hermosa ruleta, y luego se congela hasta que la página se carga, la mayoría de las veces. – CodeVirtuoso

¿Cómo sé cuando HTML ha rendido totalmente

Respuesta

Cuestiones relacionadas