Load A Random Image With Javascript

NOTE: This article was updated on March 11th, 2017 with a revised code.  Irrelevant information have been crossed out and/or removed.

---

Being able to rotate randomly through a selection of images is a simple way of keeping a webpage interesting and fresh. This tutorial aims to show you how to load a random image each time a user visits your page.

To do this, you will need three four pieces of code: An array, a function, an execution, and a reference.

---

THE JAVASCRIPT

var images = [
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Black-Ice.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Colour-Storm.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Electric-Water.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Lime-Drops.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Natural-Bubbles.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Nice-Try.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Peach-Hexagon.jpg',
    'https://agskryp.github.io/Random-Image-JavaScript/Images/Background---Room-303.jpg'
];

The array is where you will store all your images. Simply create a variable and name it whatever you like (for this example the word images is used), then put the file name and type of each of your images the path to your images into a literal notation. The more images you have in your array, the less likely the same image will appear when refreshing the page.

Now you need a function that will select one of these images at random.

---

function getRandomImage(images) {
    var num = Math.floor(Math.random() * images.length),
        pic = images[num],

        imgElement = document.getElementById('picture');

    imgElement.innerHTML = '<img src="' + pic + '" width="100%" height="100%" />';
}
getRandomImage(images);

Write a function and name it whatever you like (getRandomImage), give it an argument as well (images).

This is where the magical randomization happens!  Math.random() renders a random digit between 0 and 1, that digit then gets multiplied to the amount of images you have in your array (images.length), finally, this number is rounded down to the nearest whole number (Math.floor()). The result is then assigned to a variable (num).

A new variable (pic) is written to equal the position in the argument that’s been decided by the randomization (images[num]).

You now need a final variable to write a string that will load the image (imgString). The string is your standard HTML img code (<img src="">), you will direct the source to whichever folder you have your images saved in (this example has them saved in the images/ directory). The string is momentarily closed to insert the selected image (pic), and a new string is written to complete the HTML img code.

The final variable you need acts as a reference within the HTML where you want to place the image.  In the example, JavaScript gets the element with the ID of ‘picture‘ within the document and assigns it to the ‘imgElement‘ variable.

Finally for this function, we ask JavaScript to write the string variable (imgString) into the document.

With the variables all assigned, we need to create the content that will be used within the HTML document to show the image.  We take the ‘imgElement’ variable and give it the innerHTML property which sets the HTML syntax we give it.  The HTML syntax we want to give is the <img> element with a src that points to the ‘pic’ variable.  Once we’ve finished writing our HTML syntax, we close our function.

Finally, we execute are newly created function by calling it.

Now that you have your JavaScript written up, you need to have an execution a reference on your HTML page:

---

THE HTML

<div id="picture"></div>

Simply write a script code where you want the image to be placed on your HTML page, and execute the function you just wrote with the array name as your argument.

Put any image friendly element anywhere on your page with the ID you want to use.  JavaScript will locate this element, and embed the newly created HTML with the random image source within this ID element.

Click here to view a demo

Click here to view the repository of the demo

NOTE: The script won’t execute unless you have your JavaScript code run before your execution code.