Preloder im Mainbereich

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Preloder im Mainbereich

    Hallo,

    ich sehe es neuerdings immer öffter das in Webseite eine Art Preeloader arbeitet.

    Sprich alles was schnell aufgebaut wird wie Kopf und navi, ist sofort da und das andere zb. der Mainbereicht der etwas länger braucht läd mit ein (ich denke) rotierenden gif welches für knapp eine sekunde zu sehen ist... und dann erst erscheid der mainbereich fertig.

    Aber wie geht das?
    Ist es in PHP nicht so das von oben nach unten alles gelesen wurd und dann zum Schluß ausgegeben wird?

    Der Aufbau einer PHP Datei sieht bei mir meist in etwa so aus:

    PHP-Code:
    <?php

    $seite 
    '<div>das ist der header</div>';
    $seite .= '<div style="float:left">das ist die navi'>;
    $seite .= '<div>das ist der mainbereich'>;
    $seite .= '<div style="clear:both">das ist der footer'>;

    echo 
    $seite;

    ?>
    Aber wenn ich es so mache wird ja erst alles in einer Variable gespeichert und am ende ausgegeben oder sollte ich ab und ann ein echo einfügen das die seite in mehrreren Abschnitten angezeigt wird?

    Beispiel:

    PHP-Code:
    <?php

    $seite 
    '<div>das ist der header</div>';
    $seite .= '<div style="float:left">das ist die navi'>;
    echo 
    $seite;
    $seite '<div>das ist der mainbereich'>;
    $seite .= '<div style="clear:both">das ist der footer'>;

    echo 
    $seite;

    ?>
    Ich denke wenn ich es mit dem echo mache wird sicher der schnelle header und die navi angezeigt und der mainbereich (wo zum beispiel eine externe seite gecrawlt wird) kommt dann später nach.
    Aber was ist dann mit dem Footer? Der wird ja dann auch erst angezeigt wenn der Mainbereich fertig ist bzw. der includete crawler fertig ist.

    Oder mache ich das falsch?

    Gruß Nordin

  • #2
    das sieht eher nach ajax aus das auf den webseiten läuft.

    wenn ich meine private seite so angucke verhält sie sich genauso wie du beschrieben hast.
    den content den ich mit der ajax technik lade brauch ein wenig länger als der rest
    Gruß
    Uzu

    private Homepage

    Kommentar


    • #3
      hmm ok.
      Mit ajax hatte ich noch nie zu tun...
      Muss ich mich wohl mal mit auseinander setzten.

      Kommentar


      • #4
        Soo jetzt hab ich mich mal mit ajax beschäftigt.

        Das ergibniss ist ein simples script....
        Code:
         
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
         <head>
          <title>Ajax Beispiel 001</title>
          <script type="text/javascript">
          <!--
        	var request = false;
        
        	// Request senden
        	function setRequest(id) {
        		// Request erzeugen
        		if (window.XMLHttpRequest) {
        			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
        		} else if (window.ActiveXObject) {
        			try {
        				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
        			} catch (e) {
        				try {
        					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
        				} catch (e) {}
        			}
        		}
        		// überprüfen, ob Request erzeugt wurde
        		if (!request) {
        			alert("Kann keine XMLHTTP-Instanz erzeugen");
        			return false;
        		} else {
        			var url = "post.php";
        			// Request öffnen
        			request.open('post', url, true);
        			// Requestheader senden
        			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        			// Request senden
        			var nickname = document.getElementById(id).value;
        			request.send('name='+nickname);
        			// Request auswerten
        			request.onreadystatechange = interpretRequest;
        		}
        	}
        
        	// Request auswerten
        	function interpretRequest() {
        		switch (request.readyState) {
        			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
        			case 4:
        				if (request.status != 200) {
        					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
        				} else {
        					var content = request.responseText;
        					// den Inhalt des Requests in das <div> schreiben
        					document.getElementById('content').innerHTML = content;
        				}
        				break;
        			default:
        				break;
        		}
        	}
          //-->
          </script>
         </head>
         <body>
         <form action="" method="post">
          <input id="test" type="text" value="" /><input type="button" value="suchen" onclick="javascript:setRequest('test');" /> 
          <div id="content"></div>
        </form>
         </body>
        </html>
        in der post.php steht:

        PHP-Code:
        <?php

        header
        ('Content-Type: text/html; charset=utf-8');
        header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0');

        sleep(2);

        echo 
        $_POST['name'];

        ?>
        Das sleep() hab ich drin weil ich probieren wollte wie ich eine Art Preloader einbauen kann ich dachte das ich irgendwie den readyState 1 abrufen kann aber irgendwie wird das nichts

        Wie müsste ich das script erweitern?
        Das zum Beispiel der Text "bitte warten..." da steht bis der text aus dem inputfeld erscheind?



        Gruß Nordin
        Zuletzt geändert von Nordin; 15.12.2008, 18:32.

        Kommentar


        • #5
          O hab einen Ansatz hinbekommen:

          Habe folgendes
          Code:
          document.getElementById('content').innerHTML = 'bitte warten...';
          nach
          Code:
          			// Request auswerten 
          			request.onreadystatechange = interpretRequest;
          eingefügt.

          Ist das so korrekt?
          Scheind jedenfalls zu funktionieren.

          Kommentar


          • #6
            na einfach den gewünschten Text in dein div packen
            PHP-Code:
            <div id="content">Bitte warten</div

            Kommentar


            • #7
              ups *g* danke!

              // Edit
              Und was ist wenn das style des div geändert werden soll?

              Kommentar


              • #8
                Dann machst Du das über CSS

                Code:
                document.getElementById('content').className = 'meinNeuerStyle';
                oder so:

                Code:
                document.getElementById('content').style.display = 'block';
                Also einfach über die Style Variante ansprechen. Wobei die Vergabe von CSS Klassen sicherlich vorteilhafter ist, wenn es sich um umfangreichere Style Eigenschaften handelt.
                MM Newmedia | MeinBlog

                Kommentar


                • #9
                  super! Danke.

                  Kommentar

                  Lädt...
                  X