Random image generator in JavaScript

In this chapter, you will learn how to generate random images on a webpage with the help of JavaScript. So, we will create different random image generator using JavaScript and HTML source code. Firstly, it requires an array to contain the URLs of images to be displayed on the webpage.

The random image generator concept is mostly used for advertisement. The images you see on a website generating randomly, are already stored in a database or an array. These images display to the user within a regular time interval or change by a click. You can also provide the address of an image directly from the internet.

We will discuss two different methods for the random image generator using JavaScript. See both approaches below:

Approach 1

In this approach, images will start displaying randomly on the webpage with a regular time interval by a single click on a button. We will use the setInterval() in-built function of JavaScript to set a timer between the images to display.

In this example, we have used the original size of the image. You can also define the size for each image to display. Now, follow the steps below:

Steps for random image generator

Declare an array using JavaScript to store the images.
Provide the link or URL of images in the declared array. You can also pass the height and width in the array for the image size to display on the webpage.
Declare a JavaScript variable to store a random value calculated using this floor(Math.random()*randomImage.length) method. It will generate a random number between 0 and the length of the array that will be assigned to the images to display randomly.
Now, return the random images selected using a number calculated in the previous step.
Put all the above steps in a user-defined function (getRandomImage), which will call by clicking on a Generate Image
In HTML code, we will use a tab and provide an ID to display an image over another image. So, the images will show you one by one, by overwrapping each other.

Convert these steps into actual implementation.

Copy Code

  <html>  <head>   <title> Random Image Generator </title>  </head>  <script>  function getRandomImage() {  //declare an array to store the images  var randomImage = new Array();    //insert the URL of images in array  randomImage[0] = “https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500”;  randomImage[1] = “http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg”;  randomImage[2] = “https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500”;  randomImage[3] = “https://images.unsplash.com/photo-1543877087-ebf71fde2be1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60”;  randomImage[4] = “https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg”;  randomImage[5] = “https://images.unsplash.com/photo-1501265976582-c1e1b0bbaf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60”;    //generate a number and provide to the image to generate randomly  var number = Math.floor(Math.random()*randomImage.length);    //return the images generated by a random number  return document.getElementById(“result”).innerHTML = ‘<img src=”‘+randomImage[number]+'” />’;  }    </script>  <body>  <center><h2 style=”color:green”> Random Image Generator </h2></center>  <h4> Click the button to generate and display random images on the webpage </h4>  <!– call user-defined getRandomImage function after 2 seconds –>    <button onclick = “setInterval(getRandomImage, 2000)”> Generate Image </button>  <br> <br>  <span id=”result” align=”center”> </span>       </body>    </html>  

Test it Now

Output

By executing this code, a web page will appear with a Generate Image button. When you click this button, images will start displaying on the webpage randomly.

Click on the Generate Image button to display an image generated randomly. These images will change automatically in every few seconds, once you click on this Generate Image button.

See the output below:

“Remember that we have provide the image address in array from the internet. We have not downloaded or stored these images in our database”.

Example 2: Generate multiple random images

In this example, we will generate and display multiple random images at once when the user clicks on a button. We will create a button using the HTML code name Generate Image. These images will be stored in an array which is selected by the user. Each time when a user will click this Generate Image button, five random images in bulk will generate and display on the webpage.

See the steps below, how this will be done:

Declare an array using JavaScript and provide the link or URL of images in that array to store the images.
Use a for loop to generate multiple random images at once. We will use for loop of 0 to 5 to display five images in a single button click.
Put the below steps in this for loop.
Calculate a random number between 0 to length of the array using the floor(Math.random()*randomImage.length) method. This generated number will assign to the images to display randomly.
Now, print all five random images selected using a number calculated in the previous step.
Put all the above steps in a user-defined function (getRandomImage), which will call by clicking on a Generate Image

Convert these steps into actual implementation and look at the code below:

Copy Code

  <html>  <head>   <title> Random Image Generator </title>  </head>  <script>  function getRandomImage() {  //declare an array to store the images  var randomImage = new Array();    //insert the URL of images in array  randomImage[0] = “https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg”;  randomImage[1] = “http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg”;  randomImage[2] = “https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg”;  randomImage[3] = “https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg”;  randomImage[4] = “https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg”;  randomImage[5] = “https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg”;    //loop to display five randomly chosen images at once  for (let i=0; i< 5; i++) {  //generate a number and provide to the image to generate randomly  var number = Math.floor(Math.random()*randomImage.length);  //print the images generated by a random number  document.getElementById(“result”).innerHTML += ‘<img src=”‘+ randomImage[number] +'” style=”width:150px” />’;  }  }    </script>  <body>  <center><h2 style=”color:green”> Random Image Generator </h2></center>  <h4> Click the button to generate and display the five random images: </h4>  <!– call user-defined getRandomImage function to generate image –>    <button onclick = “getRandomImage()”> Generate Image </button>  <br> <br>  <span id=”result” align=”center”> </span>       </body>    </html>  

Test it Now

Output

By running the above code, you will get the response along with a Generate Image button. Initially, there will be no image.

When you click this Generate Image button, five images selected randomly will display to you on the web.

Again, click on the Generate Image button, five more images will display randomly again with the previous output.

Approach 2

In this approach, we will display the random images every time by clicking on a button. These images will not change automatically as in previous approach.

In this example, we will also provide the size (height and width) for each image to display on the webpage. So, the images will be displayed in size specified by you in the JavaScript code.

Steps for random image generator

Create a user-defined function randomImageGenerator() and put all the below steps inside it.
Create an array of images using JavaScript containing the location/URL, height, and width of the image to be displayed on the webpage.
Store the URL, height, and width of the images in another array index.
Generate a random number using floor() method that will use the array of images to display on the webpage randomly. It will generate a random number between 0 to the length of the array that will be assigned to the images to display randomly.
Display the image whose index number matches with the random number generated in previous step.
We will use a method to remove the previous image and override with the new image.
Create a button in HTML to change the images.

Convert these steps into actual implementation and look at the code below:

Copy Code

  <html>  <head>  <title>Display random images</title>  <style>  body {  margin-top: 30px;  }  </style>   </head>    <script>  function displayRandomImages()   {     //array of images with image location, height, and width     var imageArray = [     {        //address URL of the image       src: “https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg”,       //size for the image to be display on webpage       width: “280”,       height: “200”     },      {       src: “https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg”,       width: “320”,       height: “195”     },      {       src: “https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg”,       width: “320”,       height: “195”     },     {       src: “https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg”,       width: “350”,       height: “250”      } ];            //find the length of the array of images      var arrayLength = imageArray.length;      var newArray = [];      for (var i = 0; i < arrayLength; i++) {          newArray[i] = new Image();          newArray[i].src = imageArray[i].src;          newArray[i].width = imageArray[i].width;          newArray[i].height = imageArray[i].height;      }         // create random image number    function getRandomNum(min, max)     {        // generate and return a random number for the image to be displayed         imgNo = Math.floor(Math.random() * (max – min + 1)) + min;        return newArray[imgNo];    }        // 0 is first image and (preBuffer.length – 1) is last image of the array    var newImage = getRandomNum(0, newArray.length – 1);       // remove the previous images    var images = document.getElementsByTagName(‘img’);    var l = images.length;    for (var p = 0; p < l; p++) {       images[0].parentNode.removeChild(images[0]);    }    // display the new random image      document.body.appendChild(newImage);  }  </script>    <body>  <div>  <center>  <h2 style=”color:green”> Random Image Generator </h2>  <h4> Press the button to display and change the image </h4>  <button onclick=”displayRandomImages();”> Display Images </button>  </center>   </div>  </body>  </html>  

Test it Now

Output

By executing this code, a web page will appear with a Display Image button. Click this button to generate an image.

See an image is displayed randomly by clicking on the Display Images button.

Every time when you click on this Display Images button, a new image will show you.

We will explain the above JavaScript code step by step for more easy understanding.

Declare and initialize an array

Declare an array and store the address, height, and width of the image to display on the web.

  var imageArray = [     {        //address URL of the image       src: “https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg”,       //size for the image to be display on webpage       width: “280”,       height: “200”     },      {       src: “https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg”,       width: “320”,       height: “195”     }];  

Store the image URL, height, and width to another array index

This code is used to store the image URL, height, and width of the image to another array index so that they can be accessed easily. Therefore, we will find the length of the initial array and transfer their element to another new array.

      //find the length of the array of images      var arrayLength = imageArray.length;      var newArray = [];      for (var i = 0; i < arrayLength; i++)      {          newArray[i] = new Image();          newArray[i].src = imageArray[i].src;          newArray[i].width = imageArray[i].width;          newArray[i].height = imageArray[i].height;      }  

Generate a Random Number

This will generate a random number between 0 to the length of the array.

  function getRandomNum(min, max)     {        // generate and return a random number for the image to be displayed         imgNo = Math.floor(Math.random() * (max – min + 1)) + min;        return newArray[imgNo];    }        // 0 is first image and (preBuffer.length – 1) is last image of the array    var newImage = getRandomNum(0, newArray.length – 1);  

Remove the previous image

This code is used to remove the previous image from the web so that the new image can display.

  // remove the previous images    var images = document.getElementsByTagName(‘img’);    var l = images.length;    for (var p = 0; p < l; p++) {       images[0].parentNode.removeChild(images[0]);    }  

Display the image

Finally, we have used this code to display the image after removing the previous image.

Next TopicHow to add object in array using JavaScript

Random image generator in JavaScript

Random image generator in JavaScript

Approach 1

Steps for random image generator

Example 2: Generate multiple random images

Approach 2

Steps for random image generator

JavaScript try-catch

JAXB Marshalling Example | Convert Object to XML in Java

You may also like