Come mostrare uno spinner durante il caricamento di un'immagine tramite JavaScript

StackOverflow https://stackoverflow.com/questions/51352

  •  09-06-2019
  •  | 
  •  

Domanda

Attualmente sto lavorando su un'applicazione web che ha una pagina che visualizza un singolo grafico (un'immagine .png).In un'altra parte di questa pagina ci sono una serie di collegamenti sui quali, quando si fa clic, l'intera pagina si ricarica e appare esattamente come prima, ad eccezione del grafico al centro della pagina.

Quello che voglio fare è quando si fa clic su un collegamento in una pagina, viene modificato solo il grafico sulla pagina.Ciò accelererà enormemente le cose poiché la pagina è grande circa 100 KB e non è consigliabile ricaricare l'intera pagina solo per visualizzarla.

L'ho fatto tramite JavaScript, che funziona finora, utilizzando il seguente codice

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

Il problema è che quando l'utente fa clic sul collegamento, potrebbero essere necessari un paio di secondi prima che il grafico cambi.Ciò fa pensare all'utente che il clic non abbia fatto nulla o che il sistema sia lento a rispondere.

Quello che voglio che accada è visualizzare uno spinner/pulsante/indicatore di stato, al posto di dove si trova l'immagine durante il caricamento, così quando l'utente fa clic sul collegamento sa che almeno il sistema ha ricevuto il suo input e sta facendo qualcosa al riguardo .

Ho provato alcuni suggerimenti, anche utilizzando uno pseudo timeout per mostrare uno spinner, quindi tornare all'immagine.

Un buon suggerimento che ho avuto è quello di utilizzare quanto segue

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

Sarebbe l'ideale, tranne per il fatto che lo spinner è significativamente più piccolo del grafico visualizzato.

Altre idee?

È stato utile?

Soluzione

Ho usato qualcosa di simile per precaricare un'immagine e quindi richiamare automaticamente il mio JavaScript al termine del caricamento dell'immagine.Si desidera verificare il completamento prima di impostare la richiamata perché l'immagine potrebbe essere già memorizzata nella cache e potrebbe non richiamare la richiamata.

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(){};
    }
  }
}

Altri suggerimenti

Potresti mostrare un'immagine statica che dà il file illusione ottica di un arcolaio, come questi.

Usando il carico() metodo di jQuery, è facilmente possibile fare qualcosa non appena viene caricata un'immagine:

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

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

Utilizza la potenza della funzione setTimeout() (Ulteriori informazioni) - questo ti consente di impostare un timer per attivare una chiamata di funzione in futuro e chiamarla non bloccare l'esecuzione della funzione corrente/altre (asinc.).

Posiziona un div contenente lo spinner sopra l'immagine del grafico, con il suo attributo di visualizzazione CSS impostato su none:

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

L'nbsp impedisce al div di collassare quando lo spinner è nascosto.Senza di esso, quando attivi/disattivi la visualizzazione dello spinner, il tuo layout "si muoverà"

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

Utilizza CSS per impostare l'animazione di caricamento come immagine di sfondo centrata per il contenitore dell'immagine.

Quindi, quando carichi la nuova immagine grande, imposta prima src su una gif trasparente da 1 pixel precaricata.

per esempio.

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

Durante il caricamento di large_image.jpg, lo sfondo verrà mostrato attraverso la gif trasparente da 1 pixel.

Basandosi sulla risposta di Ed, preferirei vedere qualcosa del tipo:

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

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

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

La tua richiamata può visualizzare l'immagine nella posizione corretta e smaltire/nascondere uno spinner e l'erroreCallback impedisce alla tua pagina di "beachballing".Tutto guidato dagli eventi, senza timer o polling, inoltre non è necessario aggiungere istruzioni if ​​aggiuntive per verificare se il caricamento dell'immagine è stato completato mentre impostavi gli eventi: poiché sono impostati in anticipo, si attiveranno indipendentemente da come rapidamente le immagini vengono caricate.

Qualche tempo fa ho scritto un plugin jQuery che gestisce la visualizzazione automatica di uno spinner http://denysonique.github.com/imgPreload/

Esaminare il suo codice sorgente dovrebbe aiutarti a rilevare quando visualizzare lo spinner e visualizzarlo al centro dell'immagine caricata.

Mi piace il metodo jquery di @duddle ma trovo che load() non viene sempre chiamato (come quando l'immagine viene recuperata dalla cache in IE).Io uso invece questa versione:

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

Ciò richiama il caricamento al massimo una volta e immediatamente se il caricamento è già stato completato.

inserisci lo spinner in un div delle stesse dimensioni del grafico, conosci l'altezza e la larghezza in modo da poter utilizzare il posizionamento relativo per centrarlo correttamente.

A parte l'opzione lowsrc, ho usato anche a background-image sul imgil contenitore di.

Tieni presente che la funzione di callback viene chiamata anche se l'immagine src non esiste (errore http 404).Per evitare ciò puoi controllare la larghezza dell'immagine, come:

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

La soluzione di @iAn mi sembra buona.L'unica cosa che cambierei è invece di usare setTimeout, proverei ad agganciarmi all'evento "Load" delle immagini.In questo modo, se il download dell'immagine impiega più di 3 secondi, otterrai comunque lo spinner.

D'altra parte, se il download richiede meno tempo, otterrai lo spinner per meno di 3 secondi.

Aggiungerei alcune cifre casuali per evitare la cache del browser.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top