Homer: Fortschrittsbalken - Länger dauerndes Script

Hallo,

ich habe Seite A klicke auf den Formular Button und die Funktion auf Seite B wird aufgerufen. Man wartet einige Zeit bis diese Funktion beendet ist, solange bleibt man (ungewollt) auf Seite A und sieht oben im Tab, dass die Seite arbeitet.

Ich möchte eine Fortschrittsanzeige anzeigen und habe dieses Script dafür
https://github.com/TheBrockEllis/jQuery-and-PHP-Progress-Bar

Das Script muss ich aber in Seite B einbauen. Wie eben erwähnt bleibt man aber auf Seite A und erst, wenn die Funktion fertig durchgelaufen ist sieht man Seite B.

Wie kann ich denn jetzt den Fortschritt anzeigen?

Gruß
Homer

  1. Tach!

    ich habe Seite A klicke auf den Formular Button und die Funktion auf Seite B wird aufgerufen. Man wartet einige Zeit bis diese Funktion beendet ist, solange bleibt man (ungewollt) auf Seite A und sieht oben im Tab, dass die Seite arbeitet.

    In der Zeit wartet der Browser auf das Ende der Response und zeigt seinen eigenen mehr oder weniger nichtssagenden Balken an. Der Request erfolgt synchron, sagt man dazu. Möchtest du selbst die Kontrolle behalten, dann kannst du einen asynchronen Request starten und machst im Vordergrund solange etwas, bis das Ergebnis eingetrudelt ist (Ajax). Das Problem ist nur, wie man den echten Fortschritt anzeigen lassen kann, statt eines lediglich animierten Irgendwas ...

    Ich möchte eine Fortschrittsanzeige anzeigen und habe dieses Script dafür
    https://github.com/TheBrockEllis/jQuery-and-PHP-Progress-Bar

    Das wollte bei mir schon nicht wie gedacht. Es soll eigentlich ständig was zum Browser senden, damit dieser dann was tut, aber es wartete bis der Request (d.h. die künstliche Verzögerung) beendet war. Vermutlich war der Server schuld, der den flush()-Wunsch nicht erfüllte.

    Das Script muss ich aber in Seite B einbauen. Wie eben erwähnt bleibt man aber auf Seite A und erst, wenn die Funktion fertig durchgelaufen ist sieht man Seite B.

    Ja, man wartet schließlich darauf, dass B fertig wird, bevor da was gerendert werden kann - beziehungsweise bis so viel da ist, dass was gerendert werden kann. Dass der Browser bis eben noch A angezeigt hat, ist uninteressant. Der Server bearbeitet B und der Browser wartet nur darauf. Mit der Methode dieses Scripts kann er auch nur dann etwas anzeigen, wenn B seine Fortschrittshäppchen sendet. Schau mal in die Quelltext-Ansicht des Browsers, was B da produziert.

    Wie kann ich denn jetzt den Fortschritt anzeigen?

    Das Script ist eine Variante, die jedoch nicht unter allen Umständen arbeitet. Nicht nur Webserver, auch Browser können da ungewollt innehalten, statt Fortschritt anzuzeigen.

    Eine andere Möglichkeit ist, einen asynchronen Request abzusetzen und auf dessen Beendigung zu warten. Währenddessen kann man periodisch Requests an den Server absetzen, um sich über den Fortschritt zu informieren. Diese Requests müssen an ein anderes Script gehen, das in irgendeiner gemeinsamen Datenhaltung nachschaut, was das eigentliche Script da an Fortschritt eingetragen hat. Letzteres muss dorthinein natürlich regelmäßig berichten - am besten eindeutig einer Task zugeordnet, denn im Web kann ja vieles parallel laufen.

    dedlfix.

    1. Hi,

      vielen Dank euch beiden für die Infos. Ich möchte erst mal ein animiertes Gif anzeigen.
      Dafür habe ich jquery installiert und folgendes Script:

             <script type="text/javascript">  
      $(document).ready(function(){  
      	$("#sendeButton").click(function(){  
      		$("#clickme").empty().html('<img src="ajax-loader.gif" alt="das bild"/>');  
      		});  
      });  
      </script>
      

      HTML:

      <body>  
        
      <div id="clickme"></div>  
        
      <form action="lade-simulation.php" method="post" name="form" id="form">  
      <input type="text" value="" name="upload[]" multiple>  
      <button type="submit" value="senden" id="sendeButton">Senden</button>  
      </form>  
        
        
        
      </body>  
      </html>
      

      Wenn ich das Script ausführe, erscheint nur der Alternativtext des Bildes. Im generierten Quellcode wird das Bild auch im Div "clickme" eingefügt.

      <div id="clickme"><img src="ajax-loader.gif" alt="das bild"></div>

      Der Bild Pfad stimmt.

      Warum wird das Bild nicht angezeigt?

      Gruß
      Homer

      1. Noch eine Ergänzung, im FF wird der Alternativtext angezeigt, im Chrome gar nichts, im IE8 wird das Bild angezeigt.

        Gruß
        Homer

        1. Tach!

          Noch eine Ergänzung, im FF wird der Alternativtext angezeigt, im Chrome gar nichts, im IE8 wird das Bild angezeigt.

          Vermutlich sagen sich Firefox und Chrome, dass es sinnlos sei, das Bild noch zu laden, weil ja sowieso schon der Request nach einer anderen Seite gestartet wurde. IE8 scheint da anderer Meinung zu sein. Das Alternativtext-Verhalten der beiden Browser ist jedenfalls so üblich. Ich würde das Bild generell geladen haben, aber ausgeblendet lassen, bis es gebraucht wird.

          dedlfix.

          1. Hi,

            ich lade das Bild jetzt vor

            <div style="display:none;"><img src="ajax-loader.gif" alt="das bild"/></div>

            Jetzt wird das Bild im FF angezeigt, es ist ein Animiertes Gif und die Animation läuft nicht. Im Chrome wird es immer noch nicht angezeigt.

            Ist das gesamte Script überhaupt wirklich passend oder gibt es da andere, die viel besser geeignet sind?

            Gruß
            Homer

            1. Mahlzeit Homer,

              <div style="display:none;"><img src="ajax-loader.gif" alt="das bild"/></div>

              Ein <div> ist ein an sich aussageloses Element, das die Aufgabe hat, mehrere Elemente zusammenzufassen bzw. zu gruppieren. Dein <div> tut Nichts dergleichen. Es hat lediglich ein einziges Kind-Element ... und ist daher überflüssig. Was hältst Du von Folgendem:

              <img src="ajax-loader.gif" alt="das bild" id="loading" style="display:none;" />

              MfG,
              EKKi

              --
              sh:( fo:| ch:? rl:( br:& n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  2. Hi

    ich habe Seite A klicke auf den Formular Button und die Funktion auf Seite B wird aufgerufen. Man wartet einige Zeit bis diese Funktion beendet ist, solange bleibt man (ungewollt) auf Seite A und sieht oben im Tab, dass die Seite arbeitet.

    Wie kann ich denn jetzt den Fortschritt anzeigen?

    Vergiss die Anzeige der wahren Umstände. Zeige einfach einen stetig durchlaufenden Balken an, zb. eine gif-Animation. Reicht vollkommen aus, um zu zeigen, dass hier was geschieht. Vielleicht noch ein Textchen dazu mit: "Bitte haben Sie Geduld". reicht vollkommen aus