tag - Wie man einen Spinner beim Laden eines Bildes über JavaScript zeigt




title tag (9)

Ich arbeite gerade an einer Webanwendung, die eine Seite hat, die ein einzelnes Diagramm (ein .png Bild) anzeigt. Auf einem anderen Teil dieser Seite gibt es eine Reihe von Links, die, wenn sie angeklickt werden, die gesamte Seite neu laden und genauso aussehen wie vorher, außer für das Diagramm in der Mitte der Seite.

Was ich tun möchte, ist, wenn ein Link auf eine Seite geklickt wird, nur das Diagramm auf der Seite wird geändert. Dies wird die Dinge enorm beschleunigen, da die Seite ungefähr 100kb groß ist und nicht wirklich die gesamte Seite neu laden will, nur um dies anzuzeigen.

Ich habe dies über JavaScript getan, das bisher funktioniert, mit dem folgenden Code

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

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

Was ich möchte, ist eine Spinner / Throbber / Status-Anzeige, anstelle von wo das Bild ist, während es geladen wird, wenn der Benutzer auf den Link klickt, den sie zumindest kennen, hat das System ihre Eingabe genommen und tut etwas dagegen .

Ich habe ein paar Vorschläge ausprobiert, sogar ein Psudo-Zeitfenster benutzt, um einen Spinner zu zeigen und dann zurück zum Bild zu blättern.

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

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

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

Irgendwelche anderen Ideen?

https://code.i-harness.com


@ iAns Lösung sieht gut aus. Die einzige Sache, die ich ändern würde, ist anstatt SetTimeout zu verwenden, ich würde versuchen, mich in das Ereignis "Laden" der Bilder einzulassen. Wenn das Bild länger als 3 Sekunden zum Herunterladen benötigt, wird der Spinner trotzdem angezeigt.

Auf der anderen Seite, wenn es weniger Zeit zum Herunterladen benötigt, erhalten Sie den Spinner für weniger als 3 Sekunden.


Abgesehen von der Option lowsrc habe ich auch ein background-image auf dem Container des IMG verwendet.


Beachten Sie, dass die Callback-Funktion auch aufgerufen wird, wenn das Image src nicht existiert (http 404 error). Um dies zu vermeiden, können Sie die Breite des Bildes überprüfen:

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


Ich mag @ duddle's jquery-Methode, finde aber, dass load () nicht immer aufgerufen wird (zB wenn das Bild aus dem Cache im IE abgerufen wird). Ich benutze stattdessen diese Version:

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

Dies ruft die Last höchstens einmal und sofort auf, wenn sie bereits vollständig geladen ist.


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


Setzen Sie den Drehregler in ein div-Format, das der Größe des Diagramms entspricht. Sie kennen die Höhe und Breite, sodass Sie die relative Positionierung verwenden können, um sie korrekt zu zentrieren.


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

Wenn Sie dann das neue große Bild laden, setzen Sie den src zunächst auf ein vorinstalliertes transparentes 1-Pixel-GIF.

z.B

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

Während das large_image.jpg geladen wird, wird der Hintergrund durch das 1pix transparente gif angezeigt.


Vor einiger Zeit habe ich ein jQuery-Plugin geschrieben, das das automatische Anzeigen eines Spinneres behandelt http://denysonique.github.com/imgPreload/

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





dom