¿Podemos controlar el icono de “carga” en la pestaña del navegador?

3 minutos de lectura

Tengo una serie de llamadas AJAX a través de jQuery. Cuando se realiza una llamada ajax, no hay indicación visual. Normalmente, si hace clic en un enlace o en alguna carga que no sea ajax, el navegador muestra un pequeño icono de carga en la pestaña.

¿Hay alguna forma de decirle al navegador que muestre este pequeño ícono en la pestaña? (Hay alrededor de 30 de estas llamadas, así que espero evitar modificar cada una).

Avatar de usuario de Royi Namir
Royi Namir

No, no puedes decirle al navegador tal cosa.

Pero puedes hacer tu propio indicador de carga. Incluya un elemento oculto en su marcado, luego use el ajaxStart y ajaxStop eventos para controlar su visibilidad:

$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

ajaxStart es activado por jQuery cuando se inicia una solicitud ajax cuando no se está ejecutando ninguna otra; ajaxStop se dispara cuando se completa una solicitud ajax si no hay otros ejecutándose.

  • @MoeSweet y yo le dijimos que no puede. Le dio otra alternativa.

    – Roy Namir

    15 de noviembre de 2011 a las 15:48

  • @MoeSweet Realmente no veo por qué debería rechazar esta respuesta.

    – robo

    15 de noviembre de 2011 a las 15:49

  • @Rob Rob, No importa. Realmente no me importa esto.

    – Roy Namir

    15 de noviembre de 2011 a las 15:50

  • Su primera edición de la respuesta no incluía esta línea “No, no puede decirle al navegador tal cosa”. Voto negativo publicado ahora.

    – Moe Dulce

    15 de noviembre de 2011 a las 16:06

  • +1; esta fue una respuesta fantástica a la pregunta (una vez editada)

    – Andrés Barbero

    22 de noviembre de 2011 a las 23:45

No.

Pero puedes modificar el css del cursor.

body {
   cursor:wait;
}

  • He explorado un cambio de cursor, pero en mi investigación, la solución viene con una serie de problemas. EG El icono de carga es específico de los elementos de la página. Entonces, para cargar una página completa, necesito agregar un div de envoltura alrededor del cuerpo, pero esto puede causar problemas extraños de interrupción de clics con Firefox. Si se trata de eso, creo que preferiría agregar una ventana emergente “cargando …”.

    – P.Brian.Mackey

    15 de noviembre de 2011 a las 15:48


  • ¡Un gran indicador de carga no intrusivo!

    – R. de Ruijter

    21 dic 2021 a las 15:55

Avatar de usuario de Matt Stauffer
matt stauffer

Absolutamente puedes. Ver esta publicación: Cambiar el favicon del sitio web dinámicamente

Simplemente cree un icono animado de un gráfico de carga y cambie el icono a ese mientras se está cargando.

El problema será que no tiene exactamente el mismo gráfico de carga que usa el navegador en particular, pero creo que el mensaje se transmitirá de manera efectiva.

  • Favicon no es lo mismo. No hay dos navegadores que manejen esto de la misma manera. Ni siquiera los mismos navegadores/diferentes versiones.

    – Andrés Barbero

    22 de noviembre de 2011 a las 23:41

  • @AndrewBarber Google’s Chrome y Mozilla’s Firefox son 2 navegadores diferentes, de hecho, 2 navegadores muy populares, y manejan esto más o menos de la misma manera. 🙂

    – hanshenrik

    22 de marzo de 2016 a las 5:07

Antes de entrar en cualquier código o cualquier cosa, solo quiero decir que esta es una solución fea, pero en realidad funcionó para mí.

Lo que hice fue poner un iframe en el sitio. Luego lo escondo con pantalla: ninguno en el css.

Luego, en cada llamada ajax, vuelvo a cargar el iframe con una nueva página. Esto hace que el navegador muestre la carga en la barra de pestañas.

Sé que no es una solución bonita y tiene algunos defectos. Como si no pudieras controlar la duración de la carga si el iframe se carga más rápido que el ajax. Pero lo estoy tirando por ahí. Tal vez alguien más pueda construir sobre el concepto.

Avatar de usuario de Mubasshir Pawle
Mubasshir Pawle

Aquí hay una alternativa.
Antes de realizar la llamada, podría mostrar la imagen y luego en la función (no después de la llamada) ocultarla nuevamente.

¿Ha sido útil esta solución?