Load A Random Image With jQuery

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

In a recent tutorial I showed how you can set up a page to load a random image using just JavaScript. One of the drawbacks with that approach is the page needs to load the function before the execution, otherwise nothing will execute. This tutorial will demonstrate with just a little modification and jQuery coding you can place your function anywhere on your page.  With a little variation on the code, you can achieve the exact same results using the jQuery library.

 THE JAVASCRIPT

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

    function getRandomImage(images) {
        var num = Math.floor(Math.random() * images.length),
            pic = images[num],
            imgString = '<img src="' + pic + '" height="100%" width="100%" /$gt;';

        return imgString;
    }

    $("#picture").append(getRandomImage(Images))
})();

There’s the entire JavaScript code used for this to work.  Looks pretty similar to the JavaScript only script right? The differences between the two scripts are highlighted in bold.

NOTE: You may notice the Images and imgString values are slightly different, this is due to the script loading these images from a different website and not the hosting server.

The first thing you may notice different is that we have our script wrapped in an anonymous function.  While not 100% needed for this script to work, it is used to prevent other scripts running similar words or variables from conflicting with this function, so it’s usually good to include when creating scripts.

We’ve condensed our code slightly.  Instead of creating a variable that finds an HTML ID and then assigning it the HTML syntax we want, we’ve simply created a new variable and assigned it that HTML syntax.  We then return that variable and it’s completed HTML syntax.

Then, instead of writing the function into our document with document.write, we end the function and return the final value of imgString.

Finally, we have our getRandomImage function appended to the picture div on our HTML page.

Finally this is where the jQuery library comes into play.  We have it search the HTML document for the ID of ‘picture’ and once it finds it, it uses the append method to insert the HTML syntax from the getRandomImage function.

Click here to view a demo

Click here to view the repository of the demo