jQuery Web Page Design Tutorials

jQuery Random Image on Page Load Tutorial

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

jQuery Video Tutorial

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 random image

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.