Cómo mostrar una ruleta mientras se carga una imagen a través de JavaScript

Question

Actualmente estoy trabajando en una aplicación web que tiene una página que muestra un único gráfico (una imagen .png).En otra parte de esta página hay un conjunto de enlaces que, al hacer clic, toda la página se recarga y se ve exactamente igual que antes, excepto por el gráfico en el medio de la página.

Lo que quiero hacer es que cuando se hace clic en un enlace en una página, solo se cambia el gráfico de la página.Esto acelerará enormemente las cosas ya que la página tiene aproximadamente 100 kb de tamaño y realmente no quiero recargar toda la página solo para mostrarla.

He estado haciendo esto a través de JavaScript, que funciona hasta ahora, usando el siguiente código

document.getElementById('chart').src = '/charts/10.png';

El problema es que cuando el usuario hace clic en el enlace, pueden pasar un par de segundos antes de que el gráfico cambie.Esto hace que el usuario piense que su clic no ha hecho nada, o que el sistema tarda en responder.

Lo que quiero que suceda es mostrar un indicador giratorio/vibrante/de estado, en lugar de donde está la imagen mientras se carga, de modo que cuando el usuario haga clic en el enlace sepa que al menos el sistema ha tomado su entrada y está haciendo algo al respecto. .

Probé algunas sugerencias, incluso usando un psudo tiempo de espera para mostrar una rueda giratoria y luego regresar a la imagen.

Una buena sugerencia que he tenido es utilizar lo siguiente

<img src="/charts/10.png" lowsrc="/spinner.gif"/>

Lo cual sería ideal, excepto que la rueda giratoria es significativamente más pequeña que el gráfico que se muestra.

¿Alguna otra idea?

Answer 1

He usado algo como esto para precargar una imagen y luego volver a llamar automáticamente a mi javascript cuando la imagen termina de cargarse.Desea verificar que esté completo antes de configurar la devolución de llamada porque es posible que la imagen ya esté almacenada en caché y es posible que no llame a su devolución de llamada.

function PreloadImage(imgSrc, callback){
  var objImagePreloader = new Image();

  objImagePreloader.src = imgSrc;
  if(objImagePreloader.complete){
    callback();
    objImagePreloader.onload=function(){};
  }
  else{
    objImagePreloader.onload = function() {
      callback();
      //    clear onLoad, IE behaves irratically with animated gifs otherwise
      objImagePreloader.onload=function(){};
    }
  }
}

Answer 2

Podrías mostrar una imagen estática que proporcione la ilusión óptica de una rueda giratoria, como estas.

Answer 3

Utilizando el carga() método de jQuery, es fácilmente posible hacer algo tan pronto como se carga una imagen:

$('img.example').load(function() {
  $('#spinner').fadeOut();
});

Ver: http://api.jquery.com/load-event/

Answer 4

Utilice el poder de la función setTimeout() (Más información): esto le permite configurar un temporizador para activar una llamada de función en el futuro y llamarla no bloquear la ejecución de las funciones actuales/otras (asincrónicas).

Coloque un div que contenga la rueda giratoria encima de la imagen del gráfico, con su atributo de visualización CSS establecido en ninguno:

<div>&nbsp;<img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>

El nbsp evita que el div colapse cuando la ruleta está oculta.Sin él, cuando alternas la visualización de la rueda giratoria, tu diseño "se moverá"

function chartOnClick() {
  //How long to show the spinner for in ms (eg 3 seconds)
  var spinnerShowTime = 3000

  //Show the spinner
  document.getElementById('spinnerImg').style.display = "";

  //Change the chart src
  document.getElementById('chart').src = '/charts/10.png';

  //Set the timeout on the spinner
  setTimeout("hideSpinner()", spinnerShowTime);
}

function hideSpinner() {
  document.getElementById('spinnerImg').style.display = "none";
}

Answer 5

Utilice CSS para configurar la animación de carga como una imagen de fondo centrada para el contenedor de la imagen.

Luego, al cargar la nueva imagen grande, primero configure el src en un gif transparente de 1 píxel precargado.

p.ej.

document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';

Mientras se carga la imagen_grande.jpg, el fondo se mostrará a través del gif transparente de 1 píxel.

Answer 6

Sobre la base de la respuesta de Ed, preferiría ver algo como:

function PreLoadImage( srcURL, callback, errorCallback ) {
     var thePic = new Image();

     thePic.onload = function() {
          callback();
          thePic.onload = function(){};
     }

     thePic.onerror = function() {
          errorCallback();
     }
     thePic.src = srcURL;
}

Su devolución de llamada puede mostrar la imagen en su lugar adecuado y eliminar/ocultar una rueda giratoria, y el errorCallback evita que su página haga "playballing".Todo controlado por eventos, sin temporizadores ni encuestas, además no tiene que agregar declaraciones if adicionales para verificar si la imagen completó la carga mientras configuraba sus eventos; dado que están configurados de antemano, se activarán independientemente de cómo Rápidamente se cargan las imágenes.

Answer 7

Hace algún tiempo escribí un complemento jQuery que maneja la visualización automática de un control giratorio. http://denysonique.github.com/imgPreload/

Examinar su código fuente debería ayudarle a detectar cuándo mostrar la rueda giratoria y a mostrarla en el centro de la imagen cargada.

Answer 8

Me gusta el método jquery de @duddle, pero encuentro que no siempre se llama a load() (como cuando la imagen se recupera del caché en IE).Yo uso esta versión en su lugar:

$('img.example').one('load', function() {
  $('#spinner').remove();
}).each(function() {
  if(this.complete) {
    $(this).trigger('load');
  }
});

Esto llama a cargar como máximo una vez e inmediatamente si ya se completó la carga.

Answer 9

coloque la ruleta en un div del mismo tamaño que el gráfico, usted conoce la altura y el ancho para que pueda usar el posicionamiento relativo para centrarlo correctamente.

Answer 10

Aparte de la opción lowsrc, también he usado un background-image sobre el imgEl contenedor.

Answer 11

Tenga en cuenta que la función de devolución de llamada también se llama si el origen de la imagen no existe (error http 404).Para evitar esto, puedes verificar el ancho de la imagen, como:

if(this.width == 0) return false;

Answer 12

La solución de @iAn me parece buena.Lo único que cambiaría es que en lugar de usar setTimeout, intentaría conectarme al evento 'Cargar' de las imágenes.De esta manera, si la imagen tarda más de 3 segundos en descargarse, aún obtendrás la ruleta.

Por otro lado, si la descarga tarda menos, obtendrás el spinner durante menos de 3 segundos.

Answer 13

Agregaría algunos dígitos aleatorios para evitar el caché del navegador.