Random Image refreshed after set time

Question

so earlier I asked about creating a javascript which automatically picks an image out of the a directory randomly.

The script works perfectly, however. I would like to modify the script so that it picks an image at random to load (which it already does) then, after a set time like 10 seconds, will fade out and a new randomly picked image will fade in.

Here is the existing code:

function randomImage() {

var fileNames = [
    "1.jpg",
    "2.jpg",
    "3.jpg"
];

var randomIndex = Math.floor(Math.random() * fileNames.length);

document.getElementById("background").background = "backgrounds/" + fileNames[randomIndex];
}

Thank you!

score 3 · Answer 1 · answered Feb 22 '16 at 03:36

3

You can call your function after regular intervals like this. First call is to set image for the first time. If you are already using it, ignore it.

randomImage();
setInterval(randomImage,10000);

answered Feb 22 '16 at 03:36

Abdul Basit

394
3
12

score 1 · Accepted Answer · answered Feb 22 '16 at 03:51

1

Here you go it's just like before only I added setTimeout() pass an anonymous function which calls the randomImage() function every 10 seconds, 10000 ms.

function randomImage() {

  var fileNames = [
    "1.jpg",
    "2.jpg",
    "3.jpg"
  ];

  var randomIndex = Math.floor(Math.random() * fileNames.length);

  document.getElementById("background").background = "backgrounds/" + fileNames[randomIndex];
  setTimeout(function() {
    randomImage();
  }, 10000);
}

answered Feb 22 '16 at 03:51

Howard Combs

133
10

You don't need an anonymous function: `setTimeout(randomImage, 10000)`. – nnnnnn Feb 22 '16 at 04:30
How would I add the ability to fade out the current image, load the new image but fade it in? – Munch Feb 22 '16 at 14:33
@nnnnnn True I just wrote what I was comfortable doing. In the context of this question thought it seems like there needs to be an extra step to fadeIn and fadeOut images. – Howard Combs Feb 22 '16 at 14:47
@Munch Have you ever used jQuery? There are built in functions to fade in and out DOM elements. [Tutorial](http://www.sitepoint.com/creating-jquery-photo-slideshow-fadein-fadeout/) for using jQuery. If you want to use pure JavaScript [this question](http://stackoverflow.com/questions/23244338/pure-javascript-fade-in-function) is a good starting point. – Howard Combs Feb 22 '16 at 14:55
@HowardCombs I've tried some of the things included in the other stackoverflow post and none seemed to work. I also looked at your tutorial but I'm not sure how to implement that to my already existing javascript. What makes it harder, is the image is the background of the body so I guess that's throwing me of. – Munch Feb 22 '16 at 15:20

Rayon · Answer 3 · 2016-02-22T04:34:12.293

Use DOMElement.style.background instead of DOMElement.background to set the background of the HTML element.

To execute certain function or expression after specific duration, use Window setInterval(). It accepts 2 arguments. First argument is Callback function and second argument is the interval.

Note: This example will change the background style of element. It will not give you fadeIn/fadeOut animation.

Try this:

function randomImage() {
  var fileNames = [
    "http://ryanlb.com/images/other/images/getter-dragon-1.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}
randomImage();
setInterval(randomImage, 10000);

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#background {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
}

<div id="background"></div>

Fiddle here

I see that your code includes setInterval() - shouldn't your explanation also include it? — nnnnnn, Feb 22 '16 at 04:28
@nnnnnn, I did not have the patience to test this scenario so I had reduced the duration..I guess OP could make it out easily..And yes, I will have to add explanation about it.. — Rayon, Feb 22 '16 at 04:30

score 0 · Answer 4 · answered Feb 22 '16 at 06:34

you want to set element background url so its need like

document.getElementById("background").style.background = "url('backgrounds/" + fileNames[randomIndex]+"')";

if you want to set image url ,

document.getElementById("background").src= "backgrounds/" + fileNames[randomIndex];

Random Image refreshed after set time

4 Answers4