Problem with randomly pre-loaded image when changing image every 15 seconds

Question

I'm a newbie at coding and this is for a school project. I'm trying to change an image every 15 seconds, and I have figured out how to do it. however, I want an image to be shown immediately and not after 15 seconds. my code is below:

I know I can change the image by manipulating the src attribute of the img tag, but I want a random image to be shown upon load. I've been trying to find a solution but I couldn't find any. Can anyone help me with how to do this?

user_14510226 · Answer

You just have to add those two instructions after the creation of the images list and before the setInterval.

let random = Math.floor(Math.random() * 100);
image.src = images[random];

That is the code you will obtain:

user_9256189 · Answer

You can just name your function, and call it once, before setting the Interval.

let image = document.getElementById('image');

let images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png', 'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png', 'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png', 'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png', 'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png', 'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png', 'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png', 'image63.png', 'image64.png', 'image65.png', 'image66.png', 'image67.png', 'image68.png', 'image69.png', 'image70.png', 'image71.png', 'image72.png', 'image73.png', 'image74.png', 'image75.png', 'image76.png', 'image77.png', 'image78.png', 'image79.png', 'image80.png', 'image81.png', 'image82.png', 'image83.png', 'image84.png', 'image85.png', 'image86.png', 'image87.png', 'image88.png', 'image89.png', 'image90.png', 'image91.png', 'image92.png', 'image93.png', 'image94.png', 'image95.png', 'image96.png', 'image97.png', 'image98.png', 'image99.png', 'image100.png']

randomImage();
setInterval(randomImage, 15000);

function randomImage(){
  let random = Math.floor(Math.random() * images.length);
  image.src = images[random];
}

Here is a working snippet with different images

let images = []

for(var i = 0; i<= 100; i++){
  images.push("https://picsum.photos/300/200?random="+i);
}

let image = document.getElementById('image');


randomImage();
setInterval(randomImage, 2000);  //I have reduced the interval duration

function randomImage(){
  let random = Math.floor(Math.random() * images.length);
  image.src = images[random];
}

user_1377002 · Answer

You can shorten your code a little by using setTimeout instead of setInterval. In the function you first display the image, and then use setTimeout to call the function again after a delay.

In this working example, as I don't have access to your images, I'm populating the images array with images from dummyimage.com, and setting the timeout delay to one second so you can quickly see the results.

const image = document.getElementById('image');
const images = [];

// Return a random hex color
function rndColor() {
  return Math.floor(Math.random()*16777215).toString(16);
}

// Get two hex colours and use them
// to form a new dummy image, and then
// push that image to the images array
for (let i = 0; i < 100; i++) {
  const hex1 = rndColor();
  const hex2 = rndColor();
  images.push(`https://dummyimage.com/100x100/${hex1}/${hex2}`);
}

// The main carousel function
// Add an image to the image src, and then
// call the carousel function after a delay
function carousel() {
  const random = Math.floor(Math.random() * 100);
  image.src = images[random];
  setTimeout(carousel, 1000);
}

carousel();

user_9310906 · Answer

if you want to start from image 1 put this line after declaring the images variable:

image.src = images[0];

if you want to start from a random image each reload put this line after declaring the random variable:

image.src = images[random];

you do this to initiate a value for the image variable because by default it will equal undefined, so the problem with your code is that it was load an empty image container initially

alternatively you can just add an image path to the src attribute of the IMG tag in your HTML code, don't worry it will be overwritten each 15 seconds as targeted

Problem with randomly pre-loaded image when changing image every 15 seconds

4 Answers