example - ajax type get

Cómo hacer que AJAX active el indicador de carga del navegador

Question

Estoy haciendo un programa de programación de laboratorio habilitado para Ajax, y algunas de las operaciones de Ajax no son exactamente rápidas.

En Gmail, cuando va a su bandeja de entrada, envía un mensaje, etc. el navegador actúa como si estuviera cargando (En FF el botón de detención se habilita, aparece la barra de progreso), pero no está en una página nueva, se hace a través de AJAX.

¿Cómo lo hacen? Tengo un pequeño indicador giratorio, pero sería un buen toque que el navegador actúe como si estuviera cargando. ¿Algunas ideas?

Answer 1

Creo que this es tu respuesta. (Reverse-AJAX o técnica de "carga lenta" de Obviously.com)

Parece que el método de GMail y Facebook (el navegador muestra la página como "cargando" con iconos de carga, etc. - simplemente está simulando, porque hay una solicitud de fondo de ajax) :)

Answer 2

Creo que quieres algo como esto.

He agregado una API para extraer la ubicación geográfica de github.com (no relacionada, pero creo que sirve para el propósito de la API de muestra).

Es simple JavaScript y JQuery para mostrar / ocultar el indicador de carga al hacer la solicitud de AJAX .

$(''#btn'').click(function() {
  $(''#overlay'').show();
  $.ajax(''https://freegeoip.net/json/github.com'').then(function(response) {
    $(''#overlay'').hide();
    $(''#country'').html(response.country_name);
  });
});

body {
  padding: 0;
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.plus {
  display: flex;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
  <div class="plus">
    <img src="https://loading.io/assets/img/landing/curved-bars.svg" alt="loading"/>
  </div>
</div>

<div>
  <button id="btn">Perform AJAX Operation</button>
  <div>
  Country: <span id="country"></span>
  </div>
</div>

Answer 3

Encontré una respuesta relacionada aquí: el navegador continúa ''cargando'' después de que termina la solicitud de Ajax .

Puede crear un iframe y abrir y cerrar su contentDocument que parece iniciar y detener la animación de carga nativa del navegador. Vea un ejemplo aquí: http://jsfiddle.net/KSXkS/1/ .

Answer 4

La solución probable es utilizar iframe para activar la carga. Pero según la respuesta anterior, el método de iframe no puede funcionar en Chrome.

Tu necesidad es mostrar el icono de carga en el navegador, por lo que creo que otra forma es crear fake loading icon .

Puede actualizar el icono del navegador manualmente. Hay algunos tutoriales sobre cómo actualizar el ícono del navegador.

Y luego, intente hacer que el icono sea animado. La mayoría de los navegadores no son compatibles con el icono gif , por lo que lo que debes hacer es actualizar el icono cada pocos segundos.

Este es el código de demostración:

 var favicon_images = [];
 for (var i = 1; i <= 12; i++)
   favicon_images.push(''./icon/'' + i + ''.png'');

 var image_counter = 0;

 setInterval(function() {
     var link = document.querySelector("link[rel*=''icon'']") || document.createElement(''link'');
     link.type = ''image/x-icon'';
     link.rel = ''shortcut icon'';
     link.href = favicon_images[image_counter];
     document.getElementsByTagName(''head'')[0].appendChild(link);

   if(image_counter == favicon_images.length -1)
         image_counter = 0;
     else
         image_counter++;
 }, 150);

Creé una demostración rápida. Demo

Con esta demostración, puede encontrar que la animación del icono no se ejecuta sin problemas. Esto se debe a que cada vez que actualizamos el ícono, el navegador solicita nuevamente el ícono.

Así que transforma la imagen al formato base64 de lo que funciona sin problemas.

Demo Base64

Ahora solo necesita encontrar que el icono de carga es el mismo con Chrome y otros navegadores populares, luego active la fake loading cuando llame a ajax.

Aquí pego un tutorial de íconos de cambio:

• https://gist.github.com/mathiasbynens/428626
• Cómo animar un favicon?

Answer 5

Muchos usuarios ni siquiera entienden o notan los indicadores de carga nativos del navegador. Si es realmente una carga de larga duración, la mejor experiencia de usuario sería indicarlo como parte de su aplicación web. Recuerde que el contexto es el rey y esta es una oportunidad para comunicarle a su usuario lo que está sucediendo y qué funcionalidad todavía está disponible.

Si toda la interfaz de usuario deja de ser válida en el momento de la solicitud, es adecuada una superposición con un indicador de carga. Una superposición ligeramente opaca se comunica con el usuario sin una interrupción disruptiva en la visión.

Si solo necesita mostrar que la solicitud ha comenzado y está funcionando, es mejor usar un control giratorio al lado del botón que inició la solicitud. En caso de éxito, la ruleta se puede reemplazar con una marca de verificación verde u otro indicador común que se desvanece después de un corto período.

Estos son patrones comunes que se encuentran en muchas de las aplicaciones de Google.

Answer 6

Este artículo contiene detalles sobre diferentes tipos de solicitudes y si activan indicadores ocupados como la barra de progreso.