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

dunhamjared commented Oct 24, 2014

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

dylandgeorge commented Dec 1, 2014

Great work, thank you.

Copy link

localdog commented Jan 19, 2015

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

cjkoepke commented Aug 26, 2015

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

creativetorch commented Dec 2, 2015

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

patmifsud commented Dec 7, 2015


Copy link

KBDesigner commented Jan 7, 2016

This is great, thank you!

Copy link

stephenscaff commented Mar 5, 2016

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

Copy link

594727294 commented Jul 1, 2016

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

markostoff commented Mar 21, 2017

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

nipunbharti commented May 20, 2017

How should I change the size of image?

Copy link

ExpiredRules commented Jun 9, 2017

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

reveality commented Aug 23, 2017

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

gtheocharis commented Nov 20, 2017

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

Copy link

unusualwork commented Oct 4, 2018

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

Copy link

Thanatos8088 commented Jan 14, 2019

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

shandyjuario commented Jun 9, 2021

thanks, its great

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