Pantalla * navegador * indicador de carga (como cuando se realiza una devolución de datos) en llamadas ajax

Question

ejemplo: Vaya a su muro de Facebook, desplácese hasta el final de la página, Facebook cargará más publicaciones en la pared de forma asincrónica. O simplemente haga clic en una imagen en su publicación mural. El cuadro de diálogo de imagen (con comentarios y una imagen más grande) está cargando asincrónicamente también. (Puede ver las solicitudes GET con firebug).

Pero al mirar y la pestaña de Firefox, verá el indicador de carga, al igual que cuando se produce una devolución de datos.

Sé que esto se puede lograr usando un IFrame y cambiando su src. Como lo hace iGoogle. Pero no estoy seguro si Facebook usa un IFrame para cargar publicaciones adicionales en el muro. ¿Hay alguna otra manera de lograr esto?

Actualización: diciendo "indicador de carga" No quise decir un indicador de ajax.
Como mencioné el indicador del buscador (el que está en el lado izquierdo de una pestaña que nos muestra si la página se está cargando) cambia a la carga como si fuera una devolución de datos.

Answer 1

No AFAIK. Supongo que probablemente establezcan el IFrame src en un método ajax y cuando se carguen, moverán el contenido a un div (u otro elemento).

Answer 2

Se puede hacer con un iframe. En resumen, anexar un iframe oculto:

var $loadingIndicator = $('<iframe src="/loading/" class="visuallyhidden">'); 
$loadingIndicator.appendTo('body'); 

Tiene que carga una página que atasca, no cargas. Posiblemente en el dominio propio del sitio web ya que el navegador realmente muestra waiting for domainname.com en la barra de estado.

En el archivo domainname.com/loading/index.php pones:

<?php sleep(100); 

Y quitar el iframe cuando se hace:

$loadingIndicator.remove(); 

No está considerando ideales esto es en realidad una solicitud adicional. Algunas razones:

• su servidor tendría largas peticiones que podrían tener un impacto en el rendimiento
• el navegador usaría una de las pocas conexiones simultáneas disponibles, por lo tanto, posiblemente ralentizar lo está cargando
• se hace animaciones tartamudean en mi caso (Chrome 27/OSX, requestAnimationFrame).

través Slow-loading technique
través https://stackoverflow.com/a/3145840/288906

Answer 3

hice una biblioteca basada en jQuery para manejar esto que debe ser una solución viable en algunas situaciones (del mismo origen) y con éxito desencadeno indicadores ocupados en algunos navegadores de escritorio (Chrome y Firefox modernos al menos, y curiosamente, también IE8 pero probablemente no IE9, y definitivamente no Safari o la mayoría de los navegadores móviles).

Noisy JSON

Básicamente, estoy usando el enfoque de marco flotante para desencadenar indicadores de "ocupado", pero sin golpear artificialmente una página separada "estancado": en su lugar, simplemente usa una costumbre $ .ajaxTransport para pasar a través de una oculto iframe y luego analizar de nuevo la respuesta json. El resultado es que el navegador muestra indicadores de carga que están directamente relacionados con la solicitud que está realizando: no hay solicitudes http adicionales. Básicamente puedes instalar solo el complemento y luego decidir qué peticiones de AJAX deberían ser ruidosas y cuáles no deberían simplemente cambiar el parámetro de tipo de datos.

Como nota al margen, el hecho de que la carga de contenido en iframes NO desencadene ningún comentario de UI para el usuario en Safari e IE9 es solo bizarre.