Bei Submit DIV einblenden mit GIF-Grafik - aber Grafik läuft nicht

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bei Submit DIV einblenden mit GIF-Grafik - aber Grafik läuft nicht

    Hallo erstmal!

    Ich grüble jetzt schon etwas länger über einem Problem, vielleicht könnt ihr mir da helfen. Ich möchte in einem Formular einen Upload integrieren, das funktioniert auch alles problemlos. Nun kann der Upload von Bildern übers Netz ja doch etwas länger dauern und darum wollte ich einen Fortschrittsbalken einfügen. Ich dachte mir also Folgendes: Beim Abschicken des Formulars wird der Bereich mit dem Button ausgeblendet und ein anderer Div mit einer Fortschritts-Gif-Grafik wird eingeblendet. Das Ganze sieht dann so aus:

    Im Head:

    Quellcode

    1. <script type="text/javascript">
    3. function showWaitMessage() {
    5. document.getElementById("submitDiv").style.display = "none";
    6. document.getElementById("waitingDiv").style.display = "block";
    7. document.getElementById("progressBar").innerHTML = "<img alt='Bitte warten...' src='indicator_verybig.gif' />";
    9. }//fu
    11. </script>
    Alles anzeigen


    Im Formular:

    Quellcode

    1. <form [...] onsubmit="showWaitMessage();">


    Quellcode

    1. <fieldset>
    2. <div class="field-block" style="margin-top:30px">
    3. <div id="submitDiv">
    4. <label for="submit">Alles in Ordnung? Dann k&ouml;nnen Sie die Bestellung jetzt abschicken!</label>
    5. <input id="submit" class="submit" name="submit" type="submit" value="Los geht's!" />
    6. </div>
    8. <div id="waitingDiv" style="display:none">
    9. <div id="progressBar"><img alt="Bitte warten..." src="indicator_verybig.gif" /></div>
    10. <p>Bitte warten, der Sendevorgang l&auml;ft&hellip;</p>
    11. </div>
    12. </div>
    13. </fieldset>
    Alles anzeigen


    Wenn man das Formular abschickt wird, werden Text und Grafik zwar sichtbar. Aber komischerweise "läuft" die Gif-Animation nur in Firefox, jedoch nicht in Safari oder IE (Nachtrag: Da war ich wohl zu ungeduldig! IE funktioniert doch, nur Safari macht Probleme). Ich hatte deswegen auch schon versucht, das mit "innerHTML" zu lösen, aber die Animation steht weiterhin still. Woran kann das liegen? In Firefox läuft ja alles (wie so oft *g*) tadellos!

    Wäre toll, wenn ihr da ein paar Tipps hättet! Danke auch schon mal!

    Grüße,
    Max

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von makrro ()

  • Bevor dir zur Hilfe eilen, sei doch bitte so nett und passe den geposteten Quelltext an, so dass er wirklich lesbar wird.

    Übrigens:

    Quellcode

    1. <form onsubmit="showWaitMessage();">

    Das ändert sehr wahrscheinlich zwar nichts an deinem Problem, dürfte so aber "richtiger" sein.

  • Warum packst du nicht den gesamten Inhalt der Lade-Prozedur in ein DIV-Container, den du mit display: none; "unsichtbar" machst und später per JavaScript einfach über style.display = 'block' erscheinen lässt?
    Eventuell macht es den genannten Browsern Probleme, animierte Bilder, die noch nicht im Quelltext enthalten sind und später hinzugefügt werde, richtig darzustellen.