JavaScript Ansicht der Seite während Funktion nicht aktualisiert

[Woosh]

Hallo Leute,

ich habe folgende Funktion

<div id="divId"></div>

<script>
machIrgendwas() {
  document.getElementById("divId").innerHTML = "Foo babambam!";
  irgendWelcherCode();
  document.getElementById("divId").innerHTML = "";
}
</script>

Das Problem ist, dass die Änderungen der Seite im Browser erst angezeigt werden, wenn die Funktion komplett abgelaufen ist.

Das heißt, mein div ist leer bevor die Funktion aufgerufen wird. Wenn die Funktion abgelaufen ist, ist der Inhalt von meinem div bereits wieder "".

=> In meinem div wird nie "Foo babambam" angezeigt, weil die Seitenänderungen im Browser anscheinend nicht während einer Funktion angezeigt werden.

Ich hoffe ich konnte mein Problem einigermaßen erklären und dass ihr mir helfen könnt.

Viele Grüße
Woosh

 

[Mackz]

Man könnte dir besser helfen, wenn du mal genau erklären würdest was du eigentlich vor hast.

Ansonsten probiers mal so...

<script>
document.getElementById("divId").innerHTML = "Foo babambam!";
function machIrgendwas() {
  irgendWelcherCode();
  document.getElementById("divId").innerHTML = "";
}
setTimeout("machIrgendwas()", 3000);
</script>

 

[Woosh]

Man könnte dir besser helfen, wenn du mal genau erklären würdest was du eigentlich vor hast.

Dachte es ist einfacher, wenn ich die Geschichte drumrum nicht erzähle :wink:

Also es geht darum, eine Gif-Sanduhr (als img-Tag) einzublenden, während eine Funktion abläuft.

Das heißt, sie muss am Anfang der Funktion eingeblendet und am Ende der Funktion wieder ausgeblendet werden.

Ungefähr so:

<script>
<!--
function machIrgendwas() {
  document.getElementById("sanduhrDiv").innerHTML = "<img src='sanduhr.gif'";
  /* IRGENDWELCHER CODE */
  document.getElementById("sanduhrDiv").innerHTML = "";
}
-->
</script>

Ich hoffe das hilft weiter

Viele Grüße
Woosh

(Ging doch einfacher als gedacht )

 

[ronco]

Hallo,
Was ist das denn fuer ne function die solange braucht ?..
naja mit loading images mach ich das beim onload von dem bild... also

<script>
function laden(id,imgSrc,Function){
        var obj = document.getElementById(id);
        var loading = new Image();
        loading.onload = function (){Function();}
        obj.appendChild(loading);
        loading.src = imgSrc;
}

function tuwas (){
        tuwas....()
        document.getElementById('test_div').innerHTML = "";
}

// zum aufraufen

laden('test_div','dein pfad zum bild','tuwas');

</script>

habs allerdings nicht getestet :P

 

[Woosh]

Wunderbar hat funktioniert, danke für die Hilfe.

Zu deiner Frage: Ich zeige die Sanduhr an, weil per Ajax-Request eine relativ lange Liste aus der DB geholt wird und die Ladezeit dementsprechend lange ist.

JavaScript:

function machWas() {
    var sanduhrObj = document.getElementById("sanduhr");
    var sanduhrImg = new Image();
    sanduhrImg.src = "gfx/sanduhr.gif";
    sanduhrImg.onload = function (){ajaxSearch();}
    sanduhrObj.appendChild(sanduhrImg);
}

function ajaxSearch() {
    /*
     * AJAX-CODE
     */
    document.getElementById("sanduhr").innerHTML = "";
}

HTML:

<div id="sanduhr"></div>

Viele Grüße
Woosh