Javascript Random background Image

Question

I have written this with the intention of randomising a background image each time a user visits a site. I had to use Ajax as the image is being used as a background image in css with some animations.

var images = [
  '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];

var randomNumber = Math.floor(Math.random() * images.length);
var randomImage = "img/backgrounds/" + randomNumber + ".jpg";
jQuery.ajax(randomImage);

$(document).ajaxComplete(function() {
    $('.cover').css({ 'background-image': 'url(' + randomImage + ')' }).addClass('loaded');
});

My problem is that some images seem to be used a lot more often that others and image number 6 never shows?

I was hoping someone who is more comfortable in Javascript might be able to shed some light on this for me.

Thanks in advance, Sam

Try naming images from 0.jpg to 5.jpg

Shamanth
– Shamanth

2014-11-28 11:45:52 +00:00
Commented Nov 28, 2014 at 11:45 — Shamanth
– Shamanth, Commented Nov 28, 2014 at 11:45
or Math.floor(Math.random() * (images.length + 1))

bemol
– bemol

2014-11-28 11:46:42 +00:00
Commented Nov 28, 2014 at 11:46 — bemol
– bemol, Commented Nov 28, 2014 at 11:46
Thanks Guys, I ended up implementing something simular

user2078845
– user2078845

2014-11-28 12:45:00 +00:00
Commented Nov 28, 2014 at 12:45 — user2078845
– user2078845, Commented Nov 28, 2014 at 12:45

hjpotter92 · Accepted Answer · 2014-11-28 11:47:13Z

2

The range of variable randomNumber is 0 to 5 (inclusive). They are the indexes where you want to fetch the value from the array images:

var randomImage = "img/backgrounds/" + images[randomNumber];

answered Nov 28, 2014 at 11:47

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dip · Accepted Answer · 2014-11-28 12:06:19Z

1

change your random number as var randomNumber = Math.floor((Math.random() * images.length)+1);

answered Nov 28, 2014 at 12:06

dip

1,2612 gold badges18 silver badges32 bronze badges

1 Comment

user2078845 Over a year ago

This is what I ended up doing, Cheers

Collectives™ on Stack Overflow

Javascript Random background Image

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related