random preload image when changing image every 15 seconds-CodePudding

hi 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 add an image at the img src, 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 on how to do this?

CodePudding user response：

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>

CodePudding user response：

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

Show code snippet

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>

CodePudding user response：

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>

CodePudding user response：

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