Per JS aktiviertes GIF funktioniert nicht im IE

[Sven]

Hallo ihr,

ich habe bei einer Funktion zum Hochladen von Bildern folgendes DIV-Element:

<div id="upMsg" style="display:none;"><br>
  <br>
  Das Bild wird hochgeladen, bitte warten...<br>
  <br>
  <ul>
    <img src="resources/designs/blue/progressBar.gif">
  </ul>
</div>

Sobald man im Upload-Formular auf den Submit-Button klickt, wird folgende JS-Funktion ausgeführt:

function startUpload () {
  document.getElementById("upMsg").style.display = "block";
}

Das Ergebnis ist also: Sobald man auf den Submit-Button klickt, sieht man einen Hinweistext, der darüber informiert, dass das Hochladen etwas dauern kann, darunter ist dann eine kleine Animation.

Aber: Im IE wird das GIF nicht abgespielt, es steht einfach nur da. Im Firefox funktioniert es einwandfrei.

Kennt da jemand einen Workaround, der das GIF auch im IE zum abspielen bringt? Notfalls lass ich es so: Ich hab das GIF so konstruiert, dass im ersten Frame noch nichts passiert ist... man würde also im IE das GIF gar nicht wahrnehmen. Aber schöner wäre es doch...

Lg
Sven

[frankx]

Hellihello

Binde doch das Gif dann erst ein in der Funktion. ... My_Img.src = ...

Dank und Gruß,

frankx

[Sven]

Hallo frank,

leider das gleiche Ergebnis... im IE wird das GIF nicht abgespielt. Naja, man ist es ja gewohnt, dass man für den IE eine extra-Wurst stricken muss :-)

Trotzdem vielen Dank ;)

Lg
Sven

[frankx]

Hellihello

leider das gleiche Ergebnis... im IE wird das GIF nicht abgespielt. Naja, man ist es ja gewohnt, dass man für den IE eine extra-Wurst stricken muss :-)

Trotzdem vielen Dank ;)

na dann wirds vermutlich auch ohne JS nicht abgespielt, oder?

Dank und Gruß,

frankx

[Sven]

na dann wirds vermutlich auch ohne JS nicht abgespielt, oder?

Doch, also im FF funktioniert es einwandfrei.

Ich hatte das testweise so gemacht:

...
<input type="submit" name="upload" value="Bild jetzt hochladen" onclick="changePic()">
</form>
<img src="" height="20" width="100" name="meinPic">

Und die Funktion sah so aus:
function changePic() {
  document.images["meinPic"].src = "resources/gfx/progressBar.gif";
}

Das Ergebnis war: Am Anfang wurde im IE anstelle der Grafik ein Platzhalter angezeigt (da ja keine Quelle definiert war). Nach einem Klick auf Submit wurde das GIF angezeigt, aber auch wieder als Standbild.

Im FF war es wieder einwandfrei, kein Standbild.

Grüße
Sven

[frankx]

Hellihello

naja, ich frage mich, was kommt, ganz ohne JS,

<img src="flippy.gif" height="20" width="100" name="meinPic">

Das muss ja erstmal gehen.

Wenn das so nicht geht, kanns mit JS auch nicht gehen. Wenns geht, dann kann eine JS-Lösung her. Zb mit new Image() etc.pp.

Dank und Gruß,

frankx

[Sven]

<img src="flippy.gif" height="20" width="100" name="meinPic">

Das muss ja erstmal gehen.

Wenn das so nicht geht, kanns mit JS auch nicht gehen. Wenns geht, dann kann eine JS-Lösung her. Zb mit new Image() etc.pp.

Ja, das geht auch. SOLANGE die Funktion den Wert bei src="" noch nicht geändert hat. Ich habe das jetzt so getestet:

<img src="resources/gfx/progressBar.gif" width="125" height="13" alt="" name="meinPic">

und in der Funktion:

document.images["meinPic"].src = "resources/gfx/progressBar.gif";

Und es ist tatsächlich so: Sobald ich auf den Submit-Button klicke, hört die Animation auf. Als ob er, sobald das Hochladen beginnt, keine Lust mehr hätte, die Animation weiterlaufen zu lassen... der Focus ist ja schließlich auf einem anderen Element...

Ich hab keine Ahnung, aber vielleicht kann das mal jemand testen?

[frankx]

Hellihello

zum Testen würde ich das auseinandernehmen.

img bauen,

button bauen,

funktion auf button setzen. testen. erste wenn das geht, dann andere funktionen einbinden.

was passiert, wenn du

my_insert_image = function () {
 my_img = new Image();
 my_img.src = "bla.gif";
 document.getElementById("my_test_id").appendChild("my_img");
}

<div id="my_test_id">
platzhalter
</div>
<button onclick="my_insert_image()">

• ungetestet -

machst?

Dank und Gruß,

frankx

[Sven]

was passiert, wenn du

my_insert_image = function () {
my_img = new Image();
my_img.src = "bla.gif";
document.getElementById("my_test_id").appendChild("my_img");
}

<div id="my_test_id">
platzhalter
</div>
<button onclick="my_insert_image()">

• ungetestet -

machst?

Hey,

dann erhalte ich im IE die Meldung "Typkonflikt", und im Firefox die Meldung auf einen Exception Error. Leider kenn ich mich in OOP nicht aus, jedenfalls finde ich keinen Fehler in der Funktion.

Ich habe aber bemerkt: Wenn man <type="button" ... onclick="function()"> macht, dann geht es! Wenn man aber type="submit" ... setzt, dann bleibt die Animation stehen.

Lg
Sven

[frankx]

Hellihello

so ganz überblick ichs jetzt nicht. Du willst den submit, aber vorher die Funktion "bild_aendern_bzw_einfuegen()"? Hast du es irgendwo im Netz stehen?

<input type="image" > bzw. ein return false; in der Funktion hilft wohl nischt, weil der Absendebutton ja nicht das Bild sein soll und ein return false; das Absenden unterbinden würde.

Dank und Gruß,

frankx