Random Images On Page Load

I am currently building a site whereby they would like each image on load to display different images. I have so far been able to target these and randomise them but it is applying

Solution 1:

x does not change. You can use setTimeout() within $.each() to push random element of array to an array without duplicates; utilize selector $(".item img.people") set <img> src with .attr(function) which iterates all elements in collection of original selector

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var arr = [];

$.each(description,
  function(i, el) {
    setTimeout(function() {
      arr.push(el);
      if (arr.length === description.length) {
        $(".item img.people")
          .attr("src", function(i, src) {
            return arr[i]
          })
      }
    }, 1 + Math.floor(Math.random() * 5))
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="item">
  <img class="people" alt="">
  <img class="people" alt="">
  <img class="people" alt="">
</div>

Solution 2:

There seems to be 2 problems with your code:

1. Your randomizer is outside the .each loop. Hence why all your images get the same image.

2. All images get the src attribute, even those without the people class.

You nearly got it right though. Try a fiddle I made with these corrections, or the demo below.

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length;
$('.item img').each(function() {
  var x = Math.floor(size * Math.random()); //move random inside loop
  if ($(this).hasClass("people")) { //replace "img" with "this"
    $(this).attr("src", description[x]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <img src="" class="people">
</div>
<div class="item">
  <img src="" class="people">
</div>
<div class="item">
  <img src="">
</div>
<div class="item">
  <img src="" class="people">
</div>

Note that there are 4 items here, but one is without the people class and correctly isn't set to an image (only 3 are).

Solution 3:

You have some error in your code. you define if($("img". and that check the first img but you want each img

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length

$('.item img').each(function(i,e) {
   var x = Math.floor(Math.random() * size)
    if($(this).hasClass("people")) {
        $(this).attr("src",description[x]);
    }
});

Solution 4:

You should not define random number globally. May be below code will help you.

var description = [
  "http://placehold.it/300x300",
  "http://placehold.it/200x200",
  "http://placehold.it/100x100"
];

var size = description.length;
var x=0;

$('.item img').each(function() {
   x = Math.floor(size*Math.random());

  if($(this).hasClass("people")) {
       $(this).attr("src",description[x]);
   }
});