2012-03-27 7 views
6

Estoy tratando de lograr lo que se ha explicado here.Indicador de ocupado del navegador al cargar datos

Estoy tratando de cargar algunos datos desde el servidor al lado del cliente utilizando etiquetas de scripts dinámicos. (es decir, creo una etiqueta de script, establezco su src en mi controlador JSON y lo anexo a mi etiqueta de cabeza o cuerpo).

la secuencia de comandos se carga correctamente con los datos devueltos por el servidor. Pero durante la carga del script, , el navegador no muestra el indicador de ocupado (probado con Chrome/Firefox) (mientras que de acuerdo con this reference (página 35), este debería ser el comportamiento predeterminado).

También he agregado el método Sleep a mi método del lado del servidor para simular un proceso de larga duración, para ver el indicador de ocupado aparece. Pero todavía no hay suerte.

P.s. Cuando uso IFrame en lugar de script, todo funciona bien y el indicador de ocupado se muestra mediante el navegador. pero no puede hacerlo con la etiqueta de secuencia de comandos.

+0

¿Está utilizando algo así como el complemento UI de bloque una opción? Funciona bastante bien, si ya has invertido en jQuery (no tanto, de lo contrario). –

+0

La interfaz de usuario del bloque simplemente cambia el icono del cursor. lo que realmente quiero es ver el indicador giratorio en la pestaña. Estoy confundido de cómo Facebook lo hace. usa IFrames también? – Kamyar

Respuesta

2

En resumen:

facebook hacen uso de iframes al cargar datos de la página, y no hay nada mágico sobre el indicador de carga del navegador.


Más detalles:

al navegar de una página a otra, FB inyecta un iframe oculto en DOM y su atributo src se establecerán en la página exactamente con lo solicitado (con un par de parámetros indicando que esta es una solicitud tipo Ajax y no una actualización de página completa). Entonces la página realmente se carga en el iframe oculto. Sin embargo, el contenido no es HTML, sino que es un conjunto de etiquetas de JavaScript que consumen algunos objetos JSON que contienen HTML y otros datos necesarios para representar la página.
A continuación es de mi consola Firebug durante la carga de una página cuando el iframe se inyecta a DOM. puede verificar que una vez que la página termine de cargarse, se elimine el iframe.

facebook hidden iframe

Para tener una idea de cómo funcionan estos scripts para cargar los datos de la página, se puede leer sobre el BigPipe Technique. En pocas palabras, rompió la construcción de cada página en un par de llamados pagelets, que tienen su propio conjunto de recursos CSS y JS, por lo que los recursos de cada página pueden obtenerse del servidor en paralelo a otras páginas. big_pipe logrará poner cada página en su contenedor después de que todos sus recursos estén disponibles.

+0

Su enfoque no funciona en todos los navegadores. Safari, en particular, y los IE posteriores no responden a las cargas de iframes en términos de UI del navegador. – Dtipson

1

La carga de componentes de forma asíncrona en la página web no activará el icono de compra del navegador en los navegadores que no sean IE. Incluso es lo mismo para facebook también. Intente darle un me gusta a alguna publicación o escriba algo en la pared; estas acciones no mostrarán el ícono de compras del navegador en navegadores que no sean IE.

+1

Navegue a 'http: // developers.facebook.com/docs/reference/plugins/comments /' en la sección de demostración, haga clic en 'Ver NUMBER_OF_COMMENTS more' donde' NUMBER_OF_COMMENTS' está bien, la cantidad de comentarios. Ver el indicador del navegador. SI cambia a ocupado sin refrescar toda la página. Sospecho que están usando iframes. – Kamyar

+0

Muestra el icono de ocupado para la carga de imágenes de perfil pero no para todos los datos resultantes a través de AJAX – Epuri

+0

@Epuri cuando está navegando entre páginas en Facebook, no se realiza una recarga completa de la página. Se eliminará el contenido de la página anterior y se buscará nuevo contenido, y el indicador de carga del navegador hace que todos crean que es una recarga de página completa, pero no es así. Puede verificarlo modificando algo en el encabezado (usando las herramientas del desarrollador del navegador), y luego navegando a otra página. Los cambios se mantendrán –

Cuestiones relacionadas