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?
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>
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>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>