Bilder wieder ausblenden, nachdem sie zeitverzögert eingeblendet wurden

Question

Hallo,
ich möchte Bilder auf einer Seite zeitverzögert anzeigen und nach wenigen ms wieder ausblenden.

Bisher habe ich einen Code, mit dem ich (abgewandelt vom Verstecken des Timers) das Bild nach einiger Zeit einblenden kann.

1. Wie schaffe ich es, dass das Bild 100 ms später wieder ausgeblendet/versteckt wird?
2. Am Anfang wird das Bild immer sehr kurz eingeblendet, bevor es versteckt wird. Woran liegt das & wie kann ich das beheben?
(Ich habe absichtlich den Platzhalter gewählt, damit die nachfolgenden Fragen nicht hoch und runter springen)

Vielen Dank im Voraus!

Der Code:

<div id="meinObjekt">
<center><img src="sup.png"></center>
</div>

<script type="text/javascript">
<!--
 
function showContent() {
  var content = document.getElementById("meinObjekt");
  content.style.visibility = "";
}
 
SoSciTools.attachEvent(window, "load",
  function() {
    var content = document.getElementById("meinObjekt");
    content.style.visibility = "hidden";
    window.setTimeout(showContent, 3000);
  }
);
 
</script>

Answer 1

1. Wie schaffe ich es, dass das Bild 100 ms später wieder ausgeblendet/versteckt wird?

Setzen Sie einfach einen zweiten Timer:

SoSciTools.attachEvent(window, "load", function() {
    var content = document.getElementById("meinObjekt");
    content.style.visibility = "hidden";
    window.setTimeout(showContent, 3000);
    window.setTimeout(hideContent, 3100);
});

Die Funktion hideContent() will natürlich definiert werden.

Am Anfang wird das Bild immer sehr kurz eingeblendet, bevor es versteckt wird.

Das liegt daran, weil Ihre Funktion erst nach dem vollständigen Laden der Seite (inkl. Bild!, Event "load") aktiv wird und das Bild dann erst versteckt (visibility = "hidden"). Sie können das style="visibility: hidden" einfach direkt in den HTML-Code des Bildes schreiben.

<center><img src="sup.png" style="visibility: hidden"></center>

Comments

Vielen Dank für die schnelle Antwort!

Das Ein- und Ausblenden hat funktioniert, aber wenn ich dann das style="visibility: hidden" direkt in den HTML-Code schreibe, erscheint das Bild gar nicht mehr.
Ich habe es genauso reinkopiert wie von Ihnen vorgeschlagen. Was habe ich falsch gemacht?

---

> wenn ich dann das style="visibility: hidden" direkt in den HTML-Code schreibe, erscheint das Bild gar nicht mehr.

Schwer zu sagen ohne dass ich mir die Seite ansehen kann. Posten Sie doch bitte mal einen Pretest-Link direkt (!) zur betroffenen Seite.

---

Das ist der Link:
https://www.soscisurvey.de/masstest21/?act=v1k80AqwSGC4zYSuC1qXRrqZ

Seite 1 enthält den Code mit style="visibility: hidden"; Seite 2 ohne

---

Danke für den Link. Ich sehe das Problem: Das "visibility: hidden" muss in das <div>-Element, nicht in das <img>, denn das <div>-Element sprechen Sie im JavaScript-Code an:

<div id="meinObjekt" style="text-align: center; visibility: hidden;">
    <img src="sup.png">
</div>

---

Vielen Dank, jetzt klappt es!