如何在每次加載網站時顯示6個不同的圖片？

$(".image-box").html($(".image-box").children().sort(function() {
  return 0.5 - Math.random()
}));

$(".image-box").prepend($(".image-box-title").detach());

.image-box {
  height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-top: 10px;
  white-space: nowrap;
  overflow: auto;
}

.image-box-title {
  padding: 10px;
  /*width: 2200px;                                           not necessary? */
  border-bottom: 1px solid #e5e5e5;
  border-top: 0p;
  border-right: 0px;
  border-left: 0px;
  border-radius: 8px 8px 0px 0px;
  background-color: #583d72;
  color: #ff8e71;
}

.tester {
  display: none;
  width: 212px;
  height: 200px;
  margin: 5px 0 0 5px;
}

#a {
  background-color: black;
}

#b {
  background-color: yellow;
}

#c {
  background-color: red;
}

#d {
  background-color: green;
}

#e {
  background-color: pink;
}

#f {
  background-color: skyblue;
}

#g {
  background-color: orange;
}

#h {
  background-color: grey;
}

#i {
  background-color: darkgreen;
}

#j {
  background-color: darkblue;
}

.tester:nth-child(2),
.tester:nth-child(3),
.tester:nth-child(4),
.tester:nth-child(5),
.tester:nth-child(6),
.tester:nth-child(7) {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image-box" id="images">
  <div class="image-box-title">Images</div>
  <div id="a" class="tester"></div>
  <div id="b" class="tester"></div>
  <div id="c" class="tester"></div>
  <div id="d" class="tester"></div>
  <div id="e" class="tester"></div>
  <div id="f" class="tester"></div>
  <div id="g" class="tester"></div>
  <div id="h" class="tester"></div>
  <div id="i" class="tester"></div>
  <div id="j" class="tester"></div>
</div>