Kann man ein Bild/gif zeitversetzt (nach 3-5 sek) einblenden, ohne dafür die Seite zu wechseln?

Question

Hi,

ich möchte gerne einen Chat simulieren. Hierfür habe ich ein "schreibt..."-Gif herausgesucht, was aber nicht sofort erscheinen soll, wenn der letzte simulierte Beitrag erscheint, da es plausibler ist, wenn sich der andere simulierte Teilnehmer den Beitrag erst noch ein paar Sekunden durchliest, bevor er anfängt zu schreiben. Am liebsten wäre es mir, wenn ich dafür nicht extra noch die Seite wechseln müsste, da das Ganze, meines Empfindens nach, so auch unrealistischer wirkt.

Vielen Dank im Voraus!

Answer 1

Mit ein wenig JavaScript können Sie Elemente auf der Seite ein- und ausblenden - und das auch zeitgesteuert. Das läuft dann über window.setTimeout().

Allerdings ist der erste Einstieg nicht ganz trivial. Hier ein bisschen JavaScript-Code zum Anfangen: Timer: Weiter-Knopf nach bestimmter Zeit einblenden

Comments

Vielen Dank!

---

Ich habe es jetzt eine Weile versucht und bin aktuell bei diesem Skript:

<script type="text/javascript">
<!--
function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

}
window.setTimeout(
    show_image("TypingGIFs.gif", 100, 100, "Typing");
    , 2000);
// -->
</script>

Es scheitert aber schon daran das bloße Bild mit JavaScript anzuzeigen, unabhängig von der setTimeout-Funktion. Haben Sie eine Idee, wie ich das Bild überhaupt auf der Seite aufgerufen bekomme, also mit JavaSctipt?

Liebe Grüße

---

> Es scheitert aber schon daran das bloße Bild mit JavaScript anzuzeigen

Sie erstellen das Bild, aber Sie haben es noch nirgends auf der Seite platziert. Dafür brauchen Sie ein Element, in welches Sie es hineinsetzen können und dann ein .appendChild()

Alternativ können Sie das Symbol auch direkt per HTML einbinden und dann beim Laden der Seite ausblenden (.style.display="none"), um es später wieder einzublenden (.style.display="");

Auch ist der Aufruf im setTimeout() noch nicht korrekt. Wenn Sie es so machen, wird die Funktion direkt ausgeführt. Stattdessen müssen Sie eine Funktion als Parameter übergeben, die dann nach 2 Sek. aufgerufen wird, z.B.:

window.setTimeout(function() {
      show_image("TypingGIFs.gif", 100, 100, "Typing");
    }
    , 2000);

Die anonyme Funktion wird hier zum Parameter. Und diese ruft dann Ihre Funktion auf.

---

Vielen Dank, jetzt hat es geklappt!