subir - seleccionar imagen javascript

Cómo mostrar un spinner al cargar una imagen a través de JavaScript

Question

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

Lo que quiero hacer es cuando se hace clic en un enlace en una página, solo 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 desea volver a cargar toda la página solo para mostrar esto.

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, puede pasar un par de segundos antes de que cambie el gráfico. Esto hace que el usuario piense que su clic no ha hecho nada, o que el sistema responde lentamente.

Lo que quiero que suceda es mostrar un indicador de spinner / throbber / estado, en lugar de dónde está la imagen mientras se está cargando, de modo que cuando el usuario hace clic en el enlace saben que al menos el sistema ha tomado su opinión y está haciendo algo al respecto .

He intentado algunas sugerencias, incluso usando un tiempo de espera de un psudo para mostrar una ruleta, y luego vuelvo a la imagen.

Una buena sugerencia que he tenido es usar la siguiente

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

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

¿Alguna otra idea?

Answer 1

Además de la opción de bajada, también he usado una background-image en el contenedor del img .

Answer 2

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

Answer 3

Al usar el método load () de jQuery , es 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

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

Ver su código fuente debería ayudarlo a detectar cuándo mostrar el ruteador y mostrarlo en el centro de la imagen cargada.

Answer 5

He usado algo como esto para precargar una imagen y luego volver a llamar automáticamente a mi javascript cuando la imagen termine de cargarse. Desea verificar que se haya completado antes de configurar la devolución de llamada porque es posible que la imagen ya esté almacenada en la memoria caché y 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 6

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

Por otro lado, si se tarda menos tiempo en descargar, obtendrás la ruleta por menos de 3 segundos.

Answer 7

Me gusta el método jquery de @duddle pero encuentro que load () no siempre se llama (como cuando la imagen se recupera de la 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 carga a lo sumo una vez e inmediatamente si ya se ha completado la carga.

Answer 8

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

Answer 9

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 apropiado y disponer / ocultar un girador, y el ErrorCallback evita que su página "beachballing". Todo evento controlado, sin temporizadores ni sondeo, además de que no tiene que agregar las sentencias if adicionales para verificar si la imagen se cargó mientras estaba configurando sus eventos, dado que están configurados de antemano se dispararán independientemente de cómo rápidamente las imágenes se cargan.

Answer 10

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

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

Answer 11

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

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

p.ej

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

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

Answer 12

Use la potencia de la función setTimeout () ( Más información ) - esto le permite configurar un temporizador para activar una llamada a función en el futuro, y al llamarlo no se bloqueará la ejecución de las funciones actuales / otras (async.).

Coloque un div que contenga el spinner sobre la imagen del gráfico, con su atributo css display establecido en none:

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

El nbsp detiene el div colapsar cuando el spinner está oculto. Sin él, cuando alternas la visualización de la ruleta, tu diseño se "contrae"

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 13

coloca la ruleta en un div del mismo tamaño que la tabla, conoces la altura y el ancho para que puedas usar la posición relativa para centrarla correctamente.