Animierte gifs funktionieren nicht immer / bei jedem Browser

Question

Hallo liebes SoSci Team,

ich habe für meine Studie animierte Gifs im Einsatz mit folgenden Zeitverläufen:
1000ms - 50ms - 30ms - 400ms

Mit dem Firefox scheint alles gut zu funtionieren. Allerdings macht mir Crome und Microsoft Edge Probleme. Hier sieht es so aus als ob die 50ms und 30ms Einblendungen nicht (immer) funktionieren.

Gibt es zufällig einen HTML Code, welche beispielsweise die gifs vorab läd und somit bei Abruf einen "sauberen" Ablauf garantiert?

Ich freue mich auf eure Rückmeldung.

Viele Grüße

Answer 1

Früher brauchte man für das Vorab-Laden ein wenig JavaScript - nicht schlimm, aber inzwischen geht es einfacher: Prefetching, Preloading und Prerendering (ryte.com).

Der Trick ist, dass Sie das Preloadiung erledigen, bevor Sie das Bild zeigen. Und Vorsicht: Es ist nicht garantiert, dass der Browser das GIF erst startet, wenn es gezeigt wird. Womöglich klappt es bei Chrome nicht, weil das GIF schon abgespielt ist, bevor es ins Sichtfeld kommt.

Es gibt auch Lösungen, wie man das Abspielen von GIFs besser steuern kann. Da müssten Sie einfach mal die Suchmaschine Ihrer Wahl befragen. In solchen Fällen kann es aber sinnvoller sein, gleich ein mp4-Video einzubinden. Das kann man besser steuern.

Generell sind GIFs eine Krücke aus vergangenen Tagen, die recht viel Verbreitung genießen. Die Anzeige von GIFs im Browser ist darauf optimiert, dass sich etwas bewegt, nicht auf Timing.

Wenn man Inhalte wirklich millisekundengenau präsentieren will, ist eine Anzeige individueller Inhalte per JavaScript (mit entsprechendem Vorab-Laden) zuverlässiger. Aber das ist auch aufwändiger.

Comments

Vielen Dank für die Rückmeldung.

Preloading konnte leider die Verzögerung nicht beheben.
Was nun am Besten funktioniert hat, ist der komplette Verzicht auf die animierten gifs und ein Javascript welches die Einzelbilder ensprechend abspielt. Wenn man den richtigen Code hat, ist das Ganze sehr einfach einzurichten. Ich poste hier mal das Script. Vielleicht ist es auch für Andere nützlich ;)


<div class="slideshow-container">

<div class="mySlides" style="display:none">
  <img src="bild01.gif" style="heigh:450px">
</div>

<div class="mySlides" style="display:none">
  <img src="bild02.gif" style="heigh:450px">
</div>

<div class="mySlides" style="display:none">
  <img src="bild03_stat.gif" style="heigh:450px">
</div>

<div class="mySlides" style="display:none">
  <img src="bild04.gif" style="heigh:450px">
</div>

<div class="mySlides" style="display:none">
  <img src="bild05.gif" style="heigh:450px">
</div>

</div>


<script>
var times = [1000, 50, 30, 400, 500];
var slides = document.getElementsByClassName("mySlides");

showSlide(0);

function showSlide(index){
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  
  slides[index].style.display = "block";
  if(index < slides.length -1) {
   setTimeout(function() {showSlide(index+1)}, times[index]);
  }
}


</script>

---

Sehr gut! Danke im Namen der Nutzer, die sich künftig über den Code freuen dürfen.