GIFs zufällig wechseln

Semi8 · 08. Mai 2015

Hallo zusammen,

ich habe ein kleines Javascript-Problem das die Profis unter euch sicher einfach lösen können.

Es geht darum das ich mehrere GIF-Dateien habe, die zufällig abgespielt werden sollen. Das heißt ich habe in meinem Beispiel drei GIFs die die gleichen Maße haben und ich möchte das zufällig ein GIF gewählt wird und erst wenn das GIF fertig abgespielt wurde soll erneut ein GIF zufällig gewählt werden.

Ich habe es jetzt geschafft, dass ein GIF nach immer nach der gleichen zeitlichen Begrenzung wechselt. Ich möchte es aber wie gesagt so haben, das jedes GIF einmal durchläuft und danach das nächste zufällig gewählt wird.

HTML:

<html>
<head>
<script type="text/javascript">
<!--
var ima = [];

ima[0] = 'bilder/transporn1.gif';
ima[1] = 'bilder/transporn2.gif';
ima[2] = 'bilder/transporn3.gif';
ima[3] = 'bilder/transporn3.gif';

function BildWechsel()
{
	var num = Math.random();
	var ran = Math.floor((ima.length - 1) * num);

	document.images['wechsel'].src = ima[ran];
}

onload = function ()
{
	window.setInterval(function () { BildWechsel(); }, 10000);
}
//-->
</script>

</head>
<body>

<img id="wechsel" src="bilder/transporn1.gif" border="0" alt="">

</body>
</html>

Es wäre super wenn sich das jemand mal ansehen und eventuell korrigieren könnte.

Vielen Dank und viele Grüße

Semi

mikdoe · 09. Mai 2015

*freigeschaltet*

kkapsner · 09. Mai 2015

Der Browser bietet keine Möglichkeit an, die Länge einer GIF-Animation auszulesen oder auf das Beenden zu reagieren. Du musst die Dauer der Animation auch irgendwo im JS speichern und dann, nachdem das GIF geladen wurde, mittels window.setTimeout() einen Timer mit der entsprechenden Zeit starten:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Random GIFs</title>
<script type="text/javascript">
var ima = [
	{
		src:  'bilder/transporn1.gif',
		duration: 2000
	},
	{
		src:  'bilder/transporn2.gif',
		duration: 2000
	},
	{
		src:  'bilder/transporn3.gif',
		duration: 2000
	},
	{
		src:  'bilder/transporn4.gif',
		duration: 2000
	}
];

function bildWechsel(){
	var img = document.getElementById("wechsel");
	var num = Math.random();
	var ran = Math.floor(ima.length * num);
	
	img.onload = function(){
		window.setTimeout(bildWechsel, ima[ran].duration);
	}
	img.src = ima[ran].src;
}

window.onload = bildWechsel;
</script>

</head>
<body>
<img id="wechsel" src="" border="0" alt="">
</body>
</html>

ABER wirklich 100%ig zum richtigen Zeitpunkt wird das nie sein, da window.setTimeout() nicht wirklich präzise arbeitet.

PS: HTML-Kommentare haben in einem JS-Block nichts verloren... oder willst du noch des Mosaic unterstützen?
PPS: "transporn" klingt irgendwie unanständig... für was steht das denn?
PPPS: Dein HTML ist invalide: es fehlt die DocType und in den <head> muss ein <titel>...

Semi · 09. Mai 2015

Ich habe die Problematik anderweitig lösen können. Ich habe auf jedes GIF ein delay mit der Dauer des jeweiligen GIFs gelegt und das funktioniert auch soweit.

Das Problem ist nun aber leider, das ich nicht eine sondern drei unterschiedliche Animationen nebeneinander benötige. Ich habe also versucht das ganze mit 3 verschiedenen id=wechsel umzusetzen, um eben jede Animation mit unterschiedlichen GIFs bespielen zu können. Das scheint aber aus irgendeinem Grund nicht zu funktionieren, lediglich die dritte Animation wird zufällig abgespielt, die anderen beiden wiederholen immer wieder das erste GIF. Woran kann das liegen?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GIF</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
window.onload = function () {

    var images = [
            {src:'bilder/1/1.gif',delay:3500},
            {src:'bilder/1/2.gif',delay:1400},
            {src:'bilder/1/3.gif',delay:4000},
        ],
        element = document.images['wechsel1'],
        change_image = function () {
            var image = images[ Math.floor( Math.random() * images.length ) ];
            // (Math.random()*images.length)>>0 would be a lot faster

            element.src = image.src;

            setTimeout(change_image, image.delay);
        };

    setTimeout(change_image);

};
//-->

<!--
window.onload = function () {

    var images = [
            {src:'bilder/2/1.gif',delay:1800},
            {src:'bilder/2/2.gif',delay:1800},
            {src:'bilder/2/3.gif',delay:1800},
        ],
        element = document.images['wechsel2'],
        change_image = function () {
            var image = images[ Math.floor( Math.random() * images.length ) ];
            // (Math.random()*images.length)>>0 would be a lot faster

            element.src = image.src;

            setTimeout(change_image, image.delay);
        };

    setTimeout(change_image);

};
//-->

<!--
window.onload = function () {

    var images = [
            {src:'bilder/3/1.gif',delay:4300},
            {src:'bilder/3/2.gif',delay:3100},
            {src:'bilder/3/3.gif',delay:4100},
        ],
        element = document.images['wechsel3'],
        change_image = function () {
            var image = images[ Math.floor( Math.random() * images.length ) ];
            // (Math.random()*images.length)>>0 would be a lot faster

            element.src = image.src;

            setTimeout(change_image, image.delay);
        };

    setTimeout(change_image);

};
//-->
</script>
</head>

<body>
<div class="center">

  <div class="item top">
  <img id="wechsel1" src="bilder/1/1.gif" width="568" height="800" border="0" alt="">
  </div>
  
  <div class="item">
  <img id="wechsel2" src="bilder/2/1.gif" width="568" height="800" border="0" alt="">
  </div>
  
  <div class="item bottom">
  <img id="wechsel3" src="bilder/3/1.gif" width="568" height="800" border="0" alt="">
  </div>
  
</div>
</body>
</html>

PS: Da es sich hier um Javascript in einem HTML-Dokument handelt, dachte ich es wäre ok das in das Unterforum Javascript zu packen. Aber es tut mir leid wenn das hier falsch gelandet ist.
PPS: Es handelt sich hierbei um ein Studienprojekt das sich mit der Thematik Pornografie beschäftigt, daher der Name...

kkapsner · 11. Mai 2015

Semi schrieb:
Woran kann das liegen?

Das liegt daran, dass du window.onload zweimal überschreibst. Entweder du packst alles in ein window.onload oder du machst eine Daisychain (nicht empfohlen) oder du machst es sauber über window.addEventListener()

Semi schrieb:
Studienprojekt

Soso... Studien...

GIFs zufällig wechseln

Semi8

New member

mikdoe

Moderator

kkapsner

Super Moderator

Semi

New member

kkapsner

Super Moderator