So zeigen Sie einen Spinner an, während Sie ein Bild über JavaScript laden

Question

Ich arbeite derzeit an einer Webanwendung, die über eine Seite verfügt, auf der ein einzelnes Diagramm (ein PNG-Bild) angezeigt wird.Auf einem anderen Teil dieser Seite gibt es eine Reihe von Links, die beim Klicken die gesamte Seite neu laden und bis auf das Diagramm in der Mitte der Seite genauso aussehen wie zuvor.

Was ich tun möchte, ist, wenn auf einer Seite auf einen Link geklickt wird, nur das Diagramm auf der Seite geändert wird.Dies wird die Arbeit enorm beschleunigen, da die Seite etwa 100 KB groß ist und Sie nicht unbedingt die gesamte Seite neu laden möchten, nur um sie anzuzeigen.

Ich habe dies über JavaScript gemacht, was bisher mit dem folgenden Code funktioniert

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

Das Problem besteht darin, dass es einige Sekunden dauern kann, bis sich das Diagramm ändert, wenn der Benutzer auf den Link klickt.Dies lässt den Benutzer denken, dass sein Klick nichts bewirkt hat oder dass das System langsam reagiert.

Was ich erreichen möchte, ist, anstelle der Position des Bildes während des Ladens eine Kreisel-/Throbber-/Statusanzeige anzuzeigen, damit der Benutzer, wenn er auf den Link klickt, zumindest weiß, dass das System seine Eingaben angenommen hat und etwas dagegen unternimmt .

Ich habe ein paar Vorschläge ausprobiert, sogar eine Psudo-Zeitüberschreitung verwendet, um einen Spinner anzuzeigen und dann zum Bild zurückzukehren.

Ein guter Vorschlag, den ich hatte, ist, Folgendes zu verwenden

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

Was ideal wäre, außer dass der Spinner deutlich kleiner ist als das angezeigte Diagramm.

Irgendwelche anderen Ideen?

Answer 1

Ich habe so etwas verwendet, um ein Bild vorab zu laden und dann automatisch mein Javascript aufzurufen, wenn das Bild fertig geladen ist.Sie sollten die Vollständigkeit überprüfen, bevor Sie den Rückruf einrichten, da das Bild möglicherweise bereits zwischengespeichert ist und Ihr Rückruf möglicherweise nicht aufgerufen wird.

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

Sie könnten ein statisches Bild zeigen, das das ergibt optische Täuschung eines Spinnrads wie diese.

Answer 3

Verwendung der Belastung() Methode von jQuery, ist es leicht möglich, etwas zu tun, sobald ein Bild geladen ist:

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

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

Answer 4

Nutzen Sie die Leistungsfähigkeit der Funktion setTimeout() (Mehr Info) – Auf diese Weise können Sie einen Timer einstellen, um einen Funktionsaufruf in der Zukunft auszulösen und ihn aufzurufen Gewohnheit Ausführung der aktuellen / anderen Funktionen blockieren (asynchron).

Platzieren Sie ein Div, das den Spinner enthält, über dem Diagrammbild, wobei das CSS-Anzeigeattribut auf „Keine“ gesetzt ist:

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

Der Nbsp verhindert, dass das Div zusammenbricht, wenn der Spinner ausgeblendet ist.Ohne sie „zuckt“ Ihr Layout, wenn Sie die Anzeige des Spinners umschalten.

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

Verwenden Sie CSS, um die Ladeanimation als zentriertes Hintergrundbild für den Bildcontainer festzulegen.

Wenn Sie dann das neue große Bild laden, stellen Sie zunächst die Quelle auf ein vorinstalliertes transparentes 1-Pixel-GIF ein.

z.B.

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

Während die Datei „large_image.jpg“ geladen wird, wird der Hintergrund durch das transparente 1-Pixel-GIF angezeigt.

Answer 6

Aufbauend auf Eds Antwort würde ich lieber etwas sehen wie:

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

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

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

Ihr Callback kann das Bild an der richtigen Stelle anzeigen und einen Spinner entfernen/ausblenden, und der errorCallback verhindert, dass Ihre Seite „beachballing“ wird.Alles ereignisgesteuert, keine Timer oder Abfragen, außerdem müssen Sie keine zusätzlichen if-Anweisungen hinzufügen, um zu überprüfen, ob das Bild vollständig geladen wurde, während Sie Ihre Ereignisse eingerichtet haben – da sie vorher eingerichtet werden, werden sie unabhängig davon ausgelöst, wie Schnell werden die Bilder geladen.

Answer 7

Vor einiger Zeit habe ich ein jQuery-Plugin geschrieben, das die automatische Anzeige eines Spinners übernimmt http://denysonique.github.com/imgPreload/

Ein Blick in den Quellcode sollte Ihnen dabei helfen, zu erkennen, wann der Spinner angezeigt werden soll, und ihn in der Mitte des geladenen Bildes anzuzeigen.

Answer 8

Ich mag die Jquery-Methode von @duddle, finde aber, dass Load() nicht immer aufgerufen wird (z. B. wenn das Bild aus dem Cache im IE abgerufen wird).Ich verwende stattdessen diese Version:

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

Dies ruft den Ladevorgang höchstens einmal auf, und zwar sofort, wenn der Ladevorgang bereits abgeschlossen ist.

Answer 9

Platzieren Sie den Spinner in einem Div mit der gleichen Größe wie das Diagramm. Sie kennen die Höhe und Breite, sodass Sie es mithilfe der relativen Positionierung richtig zentrieren können.

Answer 10

Neben der Option lowsrc habe ich auch a verwendet background-image auf der img's Container.

Answer 11

Beachten Sie, dass die Rückruffunktion auch aufgerufen wird, wenn die Bildquelle nicht vorhanden ist (http 404-Fehler).Um dies zu vermeiden, können Sie die Breite des Bildes überprüfen, z. B.:

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

Answer 12

Die Lösung von @iAn sieht für mich gut aus.Das Einzige, was ich ändern würde, wäre, anstatt setTimeout zu verwenden, ich würde versuchen, mich in das „Load“-Ereignis der Bilder einzubinden.Wenn das Herunterladen des Bilds länger als 3 Sekunden dauert, wird auf diese Weise immer noch der Spinner angezeigt.

Wenn der Download hingegen weniger Zeit in Anspruch nimmt, erhalten Sie den Spinner in weniger als 3 Sekunden.

Answer 13

Ich würde einige zufällige Ziffern hinzufügen, um den Browser-Cache zu vermeiden.