AJAX - Div erst nach laden anzeigen

    Hallihallo,

    aaaaalso ich hab da mal ne Frage:
    Und zwar hab ich auf meiner Seite rechts am Rand ein DIV, in dem 3 zufällige Bilder angezeigt werden. Ich habe es schon so hinbekommen, dass bei klick auf einen link 3 Neue angezeigt werden bzw. die letzten 3...
    Jetzt hätte ich es aber gerne so, dass wenn ich den link anklicke sofort ein ladebalken oder eine Uhr oder sonstiges im DIV angezeigt wird und die neuen Bilder im Hintegrund geladen werden und dann erst angezeigt werden...
    Ich muss dazu sagen, dass ich AJAX kaum beherrsche...
    Codeschnipsel zusammenbauen und verändern bekomme ich wohl hin, aber vom Grundprinzip her alles alleine coden schaffe ich defintiv nicht^^
    Wäre cool, wenn mir da einer helfen kann =)

    also ich hab auch keinen plan von ajax, aber schreib dir doch nen javascript, was am ende der page aufgerufen wird.
    brauchste vorher nur das div auf display:none oder visibility:hidden setzen und im javascript schalteste den style um auf display:block; oder display: inline oder visibility:visible;

    ich würd da die visibility nehmen, is am einfachsten ;)

    Hmmmmmm

    ja gut, nur krieg ich das schon nich hin :D
    Wie gesagt, ich kann zwar verändern und zusammenfügen, aber komplett selber schreiben is bei JS echt nich mein Ding ^^
    Ich werds aber mal so probieren, danke =)

    die funktion würd dann so aussehen:

    Code
    function setVisible(obj){
var target = document.getElementById(obj);
target.style.visibility="visible";
}


    des schreibste in den head der seite und ganz unten kurz vor ende des bodys
    machste nochma nen script-tag wo du die funktion aufrufst und die ID des divs übergibst, das sichtbar werden soll

    natürlich könntest du das auch hart verdrahtet auf das eine div zurechtbiegen und nur einmal am ende die funktion aufrufen, aber so kanste die funktion auch für andere sachen verwenden und brauchst nur noch beim aufruf die id ändern, ohne noch ne neue funktion zu coden

    Ich danke euch erstmal für die schnelle Antwort, ich glaube aber schon fast, dass ich mir da eine unmögliche Aufgabe gestellt habe...
    Und zwar dauert der Aufbau des DIVs so lange, weil ich da ne SQL Abfrage durchführe, die die Maße der Bilder ausliest und diese Daten dann so verarbeitet, dass der Abstand der Bilder passt...
    Also innerhalb des DIVs hab ich noch 3 weitere DIVs und diese werden mithilfe der Daten der SQL Abfrage dynamisch konfiguriert...
    Jetzt habe ich einfach mal Testweise ganz am Anfang der Seite sein Test-DIV mit bloß einer Textzeile definiert, dass genau über dem DIV mit den Bildern liegt. Trotzdem wird dieses erst nach sehr langer Wartezeit angezeigt.
    Sehe ich das richtig, dass ich dem Script sagen muss: Gib erst das DIV mit Ladebalken aus, und machen dann die SQL Abfrage und schreibe dann einfach ein anderes DIV über das Ladebalken-DIV ?!?! Und wenn ja, wie mache ich das?!?! ;)

    Irgendwie bin ich mit dem Problem leicht überfordert, würde das aber sehr gerne einbauen^^

    Grüße
    Michael

    Meiner, du verstehst das ein bissel falsch ;)
    Deinen Code veränderst du nicht, es werden auch keine weiteren divs eingefügt oder Ähnliches.
    Alles, was du machst, ist das div "unsichtbar" zu machen. Dies erreichst du durch die css-eigenschaft

    Code
    #id-des-divs {
visibility: hidden;
}

    im Stylesheet.
    Im Head deiner Seite, also zwischen <head> und </head>, fügst du dann Synaptics Funktion ein. Das ist nötig, um sie zu definieren und auf deiner Seite nutzbar zu machen.
    Diese Funktion rufst du dann ganz am Ende deiner Seite wie folgt auf:

    Code
    <script type="text/javascript" rel="javascript">
setVisible("id-des-divs");
</script>


    Diesen Code setzt du direkt vor </body> deines Dokuments.

    Was erreichst du damit:
    Deine SQL-Abfrage wird wie gewohnt ausgeführt. Allerdings wurde das div auf unsichtbar gesetzt, so dass der User davon nichts sieht. Wenn der Parser des Webserves dann das Ende deines Dokuments erreicht, ruft er die javascript-Funktion auf und das div wird wieder sichtbar. Eine Webseite wird linear geladen, so dass die Bilder alle geladen sind, wenn der Parser das Javascript erreicht. Damit vermeidest du, dass der User die nicht fertig geladenen Bilder zu Gesicht bekommt.
    Einen Ladebalken bekommst du so nicht, dass wäre wirklich am besten per Ajax zu lösen, aber auch etwas aufwendiger als dieser kleinen JS-Trick ;)

    Hoffe, du verstehst es nun.
    Gruß,
    Jojo


    Hmmmm ja versteh ich schon, auch wenn vielleicht nicht zu 100%^^
    Aber ich habe ja auch nicht das Problem, dass halbfertige Bilder angezeigt werden...
    Ich habe 3 Bilder fertig geladen und dann klicke ich auf einen link, der neue generiert...
    Diese werden mithilfe von AJAX in das DIV geladen... während des Ladevorgangs sieht der User noch die alten Bilder und die neuen werden nach einigen Sekunden direkt voll angezigt...
    Für diese Zwischenzeit hätte ich aber gerne einen Ladebalken.
    Das mit dem body und head etc. kann ich so wie ich das sehe gar nicht einbauen, da in der Datei aus der ich den DIV neu lade weder body noch head tags sind. Die sind ja in der "Mutter"datei, in der sich das per AJAX zu verändernde DIV befindet.
    Müsste ich dann dort deinen Code einflächten ( unabhängig davon, dass das ja eigentlich nicht das ist was ich möchte )?
    Möcht nur wissen ob ichs kapiert hab ;)

    Noch interessanter als ein Ladebalken wäre natürlich noch ein flüssiger Übergang der Bilder...
    So, dass sich die 3 neuen Bilder von unten oder oben hereinschieben, aber da hab ich noch weniger eine Ahnung von wie ich das anstellen soll :D

    Ich sollte vielleicht dazu sagen, dass das was so lange dauert nicht das Laden der Bilder selber ist, sondern das auslesen der Höhe und Breite und das darauf folgende Anpassen der gennanten Attribute und dass die Funktion so geschrieben ist, dass alle 3 Bilder und die entsprechenden Daten per array übergeben werden.
    Ich habe folgenden code:
    $daten = funktionsname(attr1,attr2,attr3,attr4,attr5,);
    Innerhalb der Funktion habe ich einige for und do Schleifen, die etwas länger dauern und verschachtelt sind + noch das auslesen von Höhe und Breite.
    Alle Daten werden gespeichert und per array übergeben und der Variable $daten zugeordnet...

    Vielleicht hat ja jetzt einer einen Gedankenblitz =)

    :D
    Also erstmal ein Tutorial:
    http://de.wikibooks.org/wiki/Websiteen…Erstes_Programm
    Und dann noch etwas mit onReadyStateChange:
    http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp
    Und wenn das nicht reicht:
    http://www.xul.fr/en-xml-ajax.html

    Und zu guter letzt noch das Wink-Smilie: :wink:

    Jaaaaaaaaaaaaaaa =)
    Es hat geklappt, sorry hatte irgendwie Brett vorm Kopp^^
    <code>
    function show() {
    document.getElementById("pics_right").innerHTML = "Bitte warten, es werden neue Bilder gleaden";
    if (http_request.readyState == 4) {
    document.getElementById("pics_right").innerHTML = http_request.responseText;
    }
    }
    </code>
    So läuft alles rund...
    JEtzt klappts leider nur noch nich ein Bild anzuzeigen :'-(

    <code>
    function show() {
    //document.getElementById("pics_right")).innerHTML = '<img src="ladebalken.gif"/>';
    if (http_request.readyState == 4) {
    document.getElementById("pics_right").innerHTML = http_request.responseText;
    }
    }
    </code>

    SOllte es so nicht eigentlich funktionieren?!?


    Und dann habe ich noch ein Problem: Und zwar hab ich 2 DIVS die sich per Ajax verändern lassen, das eine kennt ihr ja schon gut jetzt ( ;) )
    das andere läuft auch gut... einziges Problem: Wenn ich rechts jetzt neue Bilder generieren lasse, werden diese in dem neuen DIV links auf der Seite angezeigt ( Da wo das 2.te AJAX Element jetzt ist )
    Ich hab aber keine AHnung warum das so ist. Weiß einer von euch was ich schon wieder falsch gemacht hab?^^

    bzw. es wird immer das DIV richtig geladen, dessen Javascriptfunktion weiter oben steht im Dokument...