✔ Dateigröße eines IMG ermitteln?

F

FunkyMonkey

Mitglied
Ist es mit JavaScript möglich abzufragen wie groß eine herunterzuladende Datei, etwa ein IMG ist?

In einer Galerie möchte ich eine Loading-Proceed-Bar einbauen, welche in etwa abschätzt wie lange es noch dauert bis das Bild in der "Großversion" geladen wurde.

*edit: ergänzung:*

Die Dateigröße könnte ich auch mit PHP übergeben, fällt mir gerade ein. Die Frage wäre also: Kann man per JavaScript abfragen wieviele bytes des Bildes bereits in den Browser geladen wurden?
 
Zuletzt bearbeitet:
Hi,

mir ist keine Möglichkeit bekannt. Es stehen die Eigenschaften width, height und complete zur Verfügung, anhand derer ermittelt werden kann, ob ein Bild fertig geladen wurde. Eine Eigenschaft, die die aktuell geladene Grösse zurückgibt, ist mir noch nicht über den Weg gelaufen.

Ciao
Quaese
 
das war meine Befürchtung ;-)

Ich mache es momentan so:

Im Background befindet sich eines dieser lustigen animierten "Ajax-Räder". Wird das Preview-Image vergrößert, also die Großversion davon geladen, wird der Preview zunächst transparent. Das rotierende Rädchen scheint durch.

Oben links in der Ecke erstelle ich zunächst dynamisch ein IMG-Element mit visibility:hidden und frage in einem Intervall von 10 ms die height und weidth werte ab. Sobald diese die Soll-Größe haben (wird zuvor von PHP an JavaScript übergeben) wird angenommen dass das Bild komplett geladen ist. Dann wird das Preview-IMG-Element gegen das Vollbild-IMG-Element ersetzt (anderer src) und die Transparenz weg genommen.

Der Firefox macht das einwandfrei, denn hier wird das IMG erst dann auf die volle Größe gebracht, wenn es komplett geladen wurde. Der MSIE macht relativ schnell den Platz frei und zieht das Element auf Soll-Größe noch bevor alle Daten komplett geladen sind. Vermute das steht im Header der Datei, wie viel Pixel h/w.

Und daher lag meine Vermutung nahe das man aus diesem Header auch erfährt wie viele byte die Datei hat.

Kritischer Lösungsweg: Mit PHP vorher die downloadgeschwindigkeit testen, also bytes pro sek. ...irgendwie wird das schon machbar sein. Das in die Session rein. Und dann mit PHP an JS die Dateigröße übergeben und Ladezeit für das IMG vorhersagen. Vermutung: Läuft im FF einwandfrei, der MSIE macht stress ;-)
 
Hi,

und wie sieht es aus, wenn Du statt der width- bzw. height-Eigenschaften die complete-Eigenschaft abfragst. Ist diese true, werden Breite und Höhe gesetzt.

Ciao
Quaese
 
mit complete habe ich mich noch nicht ausgiebig befasst. Wenn ich Dich richtig verstehe, ist complete = true sobald der Browser die Höhe und Breite des Bildes ermittelt hat?

Da ich aber genau das abfrage, wäre es im Prinzip das gleiche. Zugegeben etwas eleganter gleich complete abzufragen als den Umweg über Height und Width...

Oder ist complete = true tatsächlich erst dann, wenn das IMG vollständig geladen wurde?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück