Random Images On Page Refresh

Randomly load an arbitrary number of images from an array that takes the form of an HTML unordered list. Items are hidden initially with 'display:none;' in the CSS, and then a '.selected' class is randomly applied via JavaScript to reveal them again.

You can use this script to load in other things besides images - try randomly loading ads, featured content, quotes, videos, whatever! Just make sure that your markup for each item sits inside one <li>

Works in modern browsers and IE9+

Please view the source of this page for HTML markup, CSS and JS.

Demo 1

This demo loads 3 random images, which are stored as "data-src" attributes to prevent all items from downloading;

Demo 2

This demo loads 1 random link;

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.