Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Super simple way to randomly load new images on refresh via Jquery and DOM injection. Great for banners.
<!DOCTYPE html>
<!--Little CSS fade in -->
-webkit-animation: fade-in 2s ease;
-moz-animation: fade-in ease-in-out 2s both;
-ms-animation: fade-in ease-in-out 2s both;
-o-animation: fade-in ease-in-out 2s both;
animation: fade-in 2s ease;
visibility: visible;
-webkit-backface-visibility: hidden;
@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
<!--We append on this div-->
<div id="banner-load"></div>
<!--Don't forget Jquery-->
<script type='text/javascript' src=''></script>
<!--New images on load -->
//Add your images, we'll set the path in the next step
var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg];
//Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-load');
Copy link

Forgot to close the last banner image with another single quotation mark:
var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg'];

Copy link

Great work, thank you.

Copy link

Is it an error that "class" is there twice in the line $('<img class=" class="fade-in"....? And shouldn't the class name be "fadeIn" instead of "fade-in"?

Yep. Fixed

Copy link

jorgsuau commented Jun 3, 2015

thanks...very functional!

Copy link

Great snippet. If a user doesn't have JS enabled though, it'll cause a problem. Not that that's a huge percentage of users, but still.

If you care about that, load your first image on the DOM organically like so:

<img id="banner-load" src="images/banner-1.jpg">

Then, instead of injecting the entire image, just replace the src attribute:

$( "banner-load" ).attr( 'src', 'images/' + images[Math.floor(Math.random() * images.length)] );

This way, you'll still have an image showing by default if no JS is enabled.

Copy link

If you use <img id="banner-load" src="images/banner-1.jpg">, that image never gets displayed again after it gets replaced by the script. If you want a placeholder for no javascript, use <noscript><img src="images/banner-1.jpg"></noscript>

Copy link


Copy link

This is great, thank you!

Copy link

Made a plugin out of this if anyone cares. Has some options, ability to use images or background-images, etc.
Chicken Dinner

Copy link

the comments on code gave me cancer

Copy link

tustinn commented Oct 23, 2016

Thanks! How to add runat=server though? Doesn't work if I have to go back to that page. Thanks.

Copy link

This is great! Thank you!

Is there a way for this - if I have only two images, every time to display the other image and not to repeat the same image two times successively?

Copy link

How should I change the size of image?

Copy link

add a style

#banner-load {width:300px; height:auto;}

Copy link

dardos commented Jun 15, 2017


How can I put more than one image at same time?

Copy link

how is it possible to add a link to that image?
I am new to jquery and I tried $('<img class="start" a[href=""] src="img/logo/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#start'); which doesn't work apparently

Copy link

Is there a way to randomly load two or more images each time, but without loading duplicates?

Copy link

i want my image with this...
background-repeat: no-repeat;
background-size: 100%;
i have dont know html anyone help ??

Copy link

Power the dynamo, raise the lightning rod, we have a necropost!
But seriously, I have the same questing posed by revality earlier in the thread. I am running through random-capable, jquery based banners/slideshows and am interested in hyperlinks being attached to each image, and unique to each image. Any thoughts?

Copy link

ZaheerAbbasAghani commented Mar 1, 2019

I have images uploaded uploaded on my site i achieved to randomize image by using below code. This might help others.

<section id="iru-ads-widget-4" class="widget iru-ads">
   			<a href="">	
	   			<img src="http://localhost/crazy/wp-content/uploads/2019/02/person-2.jpg" class="iru_random"> 

<section id="iru-ads-widget-6" class="widget iru-ads">
    	<a href="">	
	   		<img src="http://localhost/crazy/wp-content/uploads/2019/02/person-5.jpg" class="iru_random"> 

<section id="iru-ads-widget-7" class="widget iru-ads">
    	<a href="http://www/">	
	   		<img src="http://localhost/crazy/wp-content/uploads/2019/02/person-2.jpg" class="iru_random"> 


var images = Array(); jQuery(".iru_random").each(function(index) { images.push(jQuery(this).attr('src')); jQuery(this).attr('src' , images[Math.floor(Math.random() * images.length)]); });

Copy link

thedogran commented Apr 3, 2020

I'm using this to load a random image as my fixed background on my page load and it's working like a charm. Thank you!
Is there a way I can set the image's min-height and min-width? I can't figure out where to add those properties.

Copy link

thanks, its great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment