Comment afficher un spinner lors du chargement d'une image via JavaScript

Question

Je suis actuellement en train de travailler sur une application web qui a une page qui affiche un graphique unique (un .image png). Sur une autre partie de cette page il y a un ensemble de liens qui, lorsqu'il est cliqué, la page se recharge et ressemble exactement le même que précédemment, sauf pour le tableau dans le milieu de la page.

Ce que je veux faire, c'est quand un lien est cliqué sur une page juste le tableau de la page est modifiée. Cela permettra d'accélérer les choses énormément que la page est d'environ 100ko grande, et ne veulent pas vraiment à recharger toute la page pour afficher cette.

J'ai fait cette grâce à JavaScript, qui fonctionne jusqu'à présent, en utilisant le code suivant

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

Le problème est que lorsque l'utilisateur clique sur le lien, il peut prendre une couple de secondes avant que le tableau de variations. Cela rend l'utilisateur pense que leur cliquez sur n'a rien fait, ou que le système est lent à répondre.

Ce que je veux c'est afficher un compteur / throbber / indicateur de l'état, à la place de l'endroit où l'image est en cours de chargement, de sorte que lorsque l'utilisateur clique sur le lien, ils savent au moins que le système a pris leur entrée et est en train de faire quelque chose à ce sujet.

J'ai essayé quelques suggestions, même à l'aide d'un psudo le temps de montrer un spinner, puis faites glisser l'image.

Une bonne suggestion que j'ai eu, c'est d'utiliser les éléments suivants

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

Ce qui serait idéal, à l'exception de la toupie est sensiblement plus petite que la carte qui est affichée.

D'autres idées?

Answer 1

J'ai déjà utilisé quelque chose comme ceci pour précharger une image, puis rappeler automatiquement mon code javascript une fois le chargement de l'image terminé. Vous souhaitez vérifier que vous avez terminé avant de configurer le rappel, car l'image est peut-être déjà mise en cache et ne peut pas appeler votre rappel.

 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

Vous pourriez montrer une image statique qui donne l' illusion d'optique d'une roue tournante, comme celles-ci .

Answer 3

En utilisant la méthode load () de jQuery , il est facilement possible de faire quelque chose dès qu'une image est chargée:

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

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

Answer 4

Utiliser la puissance de la setTimeout() fonction (Plus d'infos) - ceci vous permet de régler une minuterie pour déclencher un appel de fonction dans l'avenir et en l'appelant à ne pas bloquer l'exécution de courant / d'autres fonctions (async.).

La Position d'un div contenant le compteur au-dessus du graphique de l'image, avec du css attributs d'affichage définie sur none (aucun):

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

L'nbsp arrêt de la div s'effondrer lorsque la toupie est caché. Sans cela, lorsque vous basculer l'affichage de la fileuse, votre mise en page "twitch"

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";
}

Sans vergogne de l'auto promotion de mon spinner en action