The logo on almost all website are static or fixed, i.e. the logo is always the same when page load. This would be wonderful if the logo will be difference every time when page load. This jQuery shows how to load a random logo or image on webpage.

Watch jQuery Random Image on Page Load video tutorial on YouTube:

jQuery Random Number Plugin

In order to load external image into the page, a jQuery random plugin is required. You can search on the Internet and download for use for free.

Goal of jQuery Tutorial

The images are saved externally and will insert into the web page randomly.

jQuery Example Codes

$("document").ready(function() {

// Generate a random number between 1 and 6
var randomNumber = $.randomBetween(1, 6);

// Form the file name of the boat image
var fileName = "boat-" + randomNumber + ".png";

// Display the boat image
$("#boat").attr("src", fileName);

}

Result:

A difference boat image will be loaded when the page load.

This is the end of jQuery Random Image Tutorial.