Randomize background-image on multiple divs without showing same image

Question

I got 3 - 4 divs on a page where I want to randomize a single list of images everytime the page loads. In the below example this works fine, however I've found that sometimes you can end up with 3 of the same images or two of the same images. Is there a big of logic one can employ in order to avoid this?

HTML

<div class="wrap">

  <div class="divide-img"></div>
  <div class="divide-img"></div>
  <div class="divide-img"></div>

</div>

jQuery:

$(document).ready(function() {
    var images = ['http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2', 'http://lorempixel.com/400/200/sports/3', 'http://lorempixel.com/400/200/sports/4'];

    $('.divide-img').each(function(){
        $(this).css({'background-image': 'url(' + images[Math.floor(Math.random() * images.length)] + ')'});  
    });
});

Any help / guidance would be appreciated.

Link to working example

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

Instead of your approach, I would first shuffle the initial array of pictures and then assigned pictures to the divs in order they appear in the shuffled array.

After a quick search for a shuffle method in javascript I found a post (How can I shuffle an array?) that shows how to create such a function

function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

Now, once you have the shuffle method, your implementation could look something like this

$(document).ready(function() {
    var images = ['http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2', 'http://lorempixel.com/400/200/sports/3', 'http://lorempixel.com/400/200/sports/4'];
    images = shuffle(images);

    $('.divide-img').each(function(i){
        $(this).css({'background-image': 'url(' + images[i] + ')'});  
    });
});

edited May 23 '17 at 12:32

Community

1
1

answered Sep 18 '14 at 13:23

leopik

2,323
2
17
29

Love this, however are thr above answers that require less code a better solution? Although they are doing some slightly different. This works great, thank you. – Gerico Sep 18 '14 at 13:27
Less code doesn't necessarily mean a better solution. I would personally go with shuffling (also because the picture links stay in the array, they are never removed) ... long story short, this problem isn't all that difficult so as long as you pick a working solution, you're good :-) – leopik Sep 18 '14 at 13:33
Thanks. I was looking at the solution in the wrong way, great to learn something new. – Gerico Sep 18 '14 at 13:34

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You need to randomize order of elements in array and then loop trough it.

Check How to randomize (shuffle) a JavaScript array? on how to randomize array.

edited May 23 '17 at 12:16

Community

1
1

answered Sep 18 '14 at 13:21

Māris Kiseļovs

16,957
5
41
48

score 0 · Answer 3 · answered Sep 18 '14 at 13:23

0

You need to remove images you already used:

 $('.divide-img').each(function(){
      var rnd = Math.floor(Math.random() * images.length)
        $(this).css({'background-image': 'url(' + images[rnd] + ')'}); 
      images.splice(rnd, 1)
    });

answered Sep 18 '14 at 13:23

Dmitry

6,716
14
37
39

score 0 · Answer 4 · answered Sep 18 '14 at 13:24

You could just remove the images as they are used.

$(document).ready(function() {
    var images = ['http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2', 'http://lorempixel.com/400/200/sports/3', 'http://lorempixel.com/400/200/sports/4'];

    $('.divide-img').each(function(){
        var index = Math.floor(Math.random() * images.length)
        $(this).css({'background-image': 'url(' + images[index] + ')'});
        images.splice(index);
    });
});

Randomize background-image on multiple divs without showing same image

4 Answers4