amie
amie

Reputation: 23

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

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:

<!DOCTYPE html>
<html>
<body>

<div class="center">
    
<img src="" id="image">

</div>

    
<script type="text/javascript">
    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']
    setInterval(function(){
        let random = Math.floor(Math.random() * 100);
        image.src = images[random];
    }, 15000);
    </script>
    </body>
</html>

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?

Upvotes: 2

Views: 83

Answers (4)

1001pepi
1001pepi

Reputation: 114

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:

<!DOCTYPE html>
<html>
<body>

<div class="center">
    
<img src="" id="image">

</div>

    
<script type="text/javascript">
    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']
    let random = Math.floor(Math.random() * 100);
    image.src = images[random];

    setInterval(function(){
        let random = Math.floor(Math.random() * 100);
        image.src = images[random];
    }, 15000);
    </script>
    </body>
</html>

Upvotes: 1

TechySharnav
TechySharnav

Reputation: 5084

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];
}
<!DOCTYPE html>
<html>

<body>
  <div class="center">
    <img src="" id="image">
  </div>
</body>
</html>


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];
}
<!DOCTYPE html>
<html>

<body>
  <div class="center">
    <img src="" id="image">
  </div>
</body>
</html>

Upvotes: 1

Muhammed Yasser
Muhammed Yasser

Reputation: 111

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

Upvotes: 0

Andy
Andy

Reputation: 63524

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();
<div class="center">
  <img src="" id="image">
</div>

Upvotes: 0

Related Questions