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

Question

Je travaille actuellement sur une application Web qui possède une page qui affiche un seul graphique (une image .png).Sur une autre partie de cette page, il y a un ensemble de liens qui, lorsque vous cliquez dessus, la page entière se recharge et a exactement le même aspect qu'avant, à l'exception du graphique au milieu de la page.

Ce que je veux faire, c'est lorsqu'on clique sur un lien sur une page, seul le graphique de la page est modifié.Cela accélérera considérablement les choses car la page fait environ 100 Ko et vous ne voulez pas vraiment recharger la page entière juste pour l'afficher.

Je l'ai fait via 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, cela peut prendre quelques secondes avant que le graphique ne change.Cela fait penser à l'utilisateur que son clic n'a rien fait ou que le système est lent à répondre.

Ce que je veux, c'est afficher un indicateur de spinner / throbber / d'état, à la place de l'endroit où se trouve l'image pendant son chargement. Ainsi, lorsque l'utilisateur clique sur le lien, il sait qu'au moins le système a pris en compte son entrée et fait quelque chose à ce sujet. .

J'ai essayé quelques suggestions, même en utilisant un délai d'attente pseudo pour afficher un spinner, puis en revenant à l'image.

Une bonne suggestion que j'ai eue est d'utiliser ce qui suit

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

Ce qui serait idéal, sauf que la roulette est nettement plus petite que le graphique affiché.

D'autres idées ?

Answer 1

J'ai utilisé quelque chose comme ça pour précharger une image, puis rappeler automatiquement mon javascript lorsque le chargement de l'image est terminé.Vous souhaitez vérifier terminé avant de configurer le rappel, car l'image est peut-être déjà mise en cache et elle risque de ne 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 pouvez afficher une image statique qui donne le illusion d'optique d'une roue tournante, comme celles-ci.

Answer 3

En utilisant le charger() méthode 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

Utilisez la puissance de la fonction setTimeout() (Plus d'informations) - cela vous permet de définir une minuterie pour déclencher un appel de fonction dans le futur et de l'appeler ne le fera pas bloquer l'exécution des fonctions actuelles/autres (async.).

Positionnez un div contenant le spinner au-dessus de l'image du graphique, avec son attribut d'affichage CSS défini sur none :

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

Le nbsp empêche le div de s'effondrer lorsque le spinner est masqué.Sans cela, lorsque vous activez l'affichage du spinner, votre mise en page "se contractera"

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

Utilisez CSS pour définir l'animation de chargement comme image d'arrière-plan centrée pour le conteneur de l'image.

Ensuite, lors du chargement de la nouvelle grande image, définissez d'abord le src sur un gif transparent préchargé de 1 pixel.

par exemple.

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

Pendant le chargement du fichier large_image.jpg, l'arrière-plan s'affichera à travers le gif transparent de 1 pixel.

Answer 6

En m'appuyant sur la réponse d'Ed, je préférerais voir quelque chose comme :

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

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

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

Votre rappel peut afficher l'image à sa place appropriée et éliminer/masquer un spinner, et le errorCallback empêche votre page de "beachballing".Tous pilotés par des événements, pas de minuterie ni d'interrogation, et vous n'avez pas besoin d'ajouter des instructions if supplémentaires pour vérifier si le chargement de l'image est terminé pendant que vous configurez vos événements - puisqu'ils sont configurés à l'avance, ils se déclencheront quelle que soit la manière dont rapidement les images se chargent.

Answer 7

Il y a quelque temps, j'ai écrit un plugin jQuery qui gère l'affichage automatique d'un spinner http://denysonique.github.com/imgPreload/

L'examen de son code source devrait vous aider à détecter quand afficher le spinner et à l'afficher au centre de l'image chargée.

Answer 8

J'aime la méthode jquery de @duddle mais je trouve que load() n'est pas toujours appelé (comme lorsque l'image est récupérée du cache dans IE).J'utilise plutôt cette version :

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

Cela appelle load au plus une fois et immédiatement si le chargement est déjà terminé.

Answer 9

placez le spinner dans un div de la même taille que le graphique, vous connaissez la hauteur et la largeur afin de pouvoir utiliser le positionnement relatif pour le centrer correctement.

Answer 10

Outre l'option lowsrc, j'ai également utilisé un background-image sur le imgle conteneur.

Answer 11

Sachez que la fonction de rappel est également appelée si le src de l'image n'existe pas (erreur http 404).Pour éviter cela, vous pouvez vérifier la largeur de l'image, comme :

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

Answer 12

La solution de @iAn me semble bonne.La seule chose que je changerais est qu'au lieu d'utiliser setTimeout, j'essaierais de me connecter à l'événement 'Load' des images.De cette façon, si le téléchargement de l’image prend plus de 3 secondes, vous obtiendrez toujours le spinner.

En revanche, si le téléchargement prend moins de temps, vous obtiendrez le spinner pendant moins de 3 secondes.

Answer 13

J'ajouterais quelques chiffres aléatoires pour éviter le cache du navigateur.