javascript - funciona - mostrar loading mientras carga pagina jquery
¿Cómo funciona el progreso de la carga del navegador de la demostración de Facebook durante las cargas de la página de AJAX? (3)
El navegador muestra el estado de carga cuando hay un elemento en el documento que se está cargando. Las solicitudes de Ajax están hechas completamente dentro de JavaScript; el documento no se ve afectado y, por lo tanto, el estado de carga no se activa.
Por otro lado, la mayoría de las solicitudes de Facebook se realizan insertando una etiqueta <script> en el documento, apuntando a un archivo JavaScript que contiene los datos que desean. (Esencialmente JSONP, excepto que usan un formato diferente). El navegador mostrará su estado de carga porque la etiqueta <script> es un elemento descargado en el documento.
Esta técnica / JSONP puede exponer su sitio a riesgos de seguridad si no tiene cuidado, porque se permiten solicitudes entre sitios. Facebook se ocupa de esto mediante la generación de URL aleatorias para cada recurso, que se envían al navegador en la carga de la página inicial.
Con el fin de mantener el cliente de mensajería instantánea conectado en todo momento Facebook evita cargas de página completa al utilizar AJAX para cargar sus páginas antes de insertarlas en el documento.
Sin embargo, durante las solicitudes de Facebook AJAX, el navegador parece estar visiblemente cargando; el botón de recarga cambia a una X, y el indicador de progreso incorporado en el navegador indica cargar / esperar, etc.)
He podido implementar la navegación basada en AJAX con éxito, pero mi navegador no muestra ninguna indicación de carga (dado que las solicitudes son asíncronas) ¿cómo lo hace Facebook?
Facebook usa iframes para la comunicación cuando quieren que aparezca el estado ''ocupado'' del navegador. Puede usar iframes para realizar ayax de dominio cruzado al tener las funciones de invocación iframe en la ventana principal.
Facebook usa una herramienta que ellos desarrollaron llamada Big Pipe para básicamente transmitir su sitio al cliente en fragmentos. Envían una etiqueta de script inicial con un DOM al cliente, y la secuencia de comandos carga los módulos en la página de forma asincrónica. La idea es que el cliente presente el módulo 1 mientras el servidor busca el módulo 2, lo que mejora el tiempo de carga.
Además de eso, usan una técnica llamada larga encuesta . Con HTTP 1.1 pueden aprovechar una conexión persistente y no tener que preocuparse por los tiempos de espera. Cuando se procesa la página, la secuencia de comandos del lado del cliente realiza una solicitud de AJAX a Facebook para esencialmente "escuchar" un evento. Se sentará allí y escuchará hasta que ocurra un evento. Mientras tanto, el navegador parecerá estar "cargando" datos.
Cuando un evento se desencadena al final de Facebook (digamos que alguien comentó en su publicación en la pared), FB enviará esa respuesta al cliente para disparar las devoluciones de llamada respectivas (como mostrar una pequeña información sobre el comentario) e INMEDIATAMENTE envíe otra solicitud a FB para escuchar el próximo evento.