Random Animation changing GIFs

Question

This post concerns with my previous post: GIFs changing randomly

I have 3 different animations next to each other. Each one consist of different gifs which are shown randomly after each other. So I wrote the html for this, but in this case only the third animation changes and the rest always stays the same. Any idea on this? @Ismael Miguel

<!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></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>

I suggest printing the value of "Math.floor( Math.random() * images.length )", which seems a problem at first glance. And using html comment tags inside a script seems a bit odd ... does that work? — Yogi, May 09 '15 at 17:47
@Robert It is because (in the previous question the O.P. asked) he was trying to make for 1 element and I simply assigned a function to `window.onload`. The O.P. repeated the code and each time he assigns a new function. That's why it only works on the last. — Ismael Miguel, May 09 '15 at 17:56
@Robert as Ismael Migeul is saying, each time you call `window.onload = ` you are assigning an event handler to the `window` object's `onload` event... meaning, you are *replacing* the previously assigned event handler (resulting in only the last one executing). For your purpose, you only need to make the assignment *once* — wahwahwah, May 09 '15 at 18:13
@wahwahwah Thank you for explaining it in a easier way. That is **exactly** what I meant. — Ismael Miguel, May 09 '15 at 18:16

Ismael Miguel · Answer 1 · 2015-05-09T18:17:02.230

Your problem is that the window.onload is being assigned a new function everytime.

This means that only the last function will 'survive', and will be executed.

You have 2 options:

Use window.addEventListener('load',function(){ [code] }), with repeated code
Rewrite it to handle an array of elements, with individual intervals

The best option is the 2nd one.

And I've rewritten it here:

window.onload = function () {

 var colors = [
   {name:'red',delay:3000},
   {name:'yellow',delay:1000},
   {name:'green',delay:2300},
   {name:'blue',delay:2600},
   {name:'pink',delay:1300},
   {name:'purple',delay:500},
  ],
  elements = document.getElementsByTagName('span'), //the array is here
  change_color = function ( element ) {
   var color = colors[ ( Math.random() * colors.length )>>0 ];

   element.style.color = color.name;

   setTimeout(function(){
    change_color(element);
   }, color.delay);
  };

 for(var i=0, l=elements.length; i<l; i++)
 {
  change_color(elements[i]);
 }

};

<span style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">I change color!</span>

<br><br><br><!-- bad html! -->

<span style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">I change too!</span>

<br><br><br>

<span style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">Look at me!</span>

This, again, using the same example to change the color of multiple elements.

This can be very easily changed to change the images.

Random Animation changing GIFs

1 Answers1

Linked