防止在math.random函数上重复现有图像

Question

im试图创建一个随机变化的图像网格。它现在可以正常工作，但是我无法防止现有图像重复出现问题。我该如何预防？

Codepen：https://codepen.io/ksmskt/pen/GemBNV

(function($) {

  //image grid

  var images = [
    'img/grid/image/1.jpg',
    'img/grid/image/4.jpg',
    'img/grid/image/5.jpg',
    'img/grid/image/6.jpg',
    'img/grid/image/10.jpg',
    'img/grid/image/11.jpg',
    'img/grid/image/14.jpg',
    'img/grid/image/15.jpg',
    'img/grid/image/16.jpg',
    'img/grid/image/17.jpg',
    'img/grid/image/19.jpg',
    'img/grid/image/20.jpg',
    'img/grid/image/21.jpg',
    'img/grid/image/22.jpg',
    'img/grid/image/23.jpg',
    'img/grid/image/24.jpg',

  ];

  var lis = document.getElementsByClassName('randomImg');

  window.setInterval(function changeNameRandomly() {
    var randomImgIndex = Math.floor(Math.random() * images.length);
    var randomLiIndex = Math.floor(Math.random() * lis.length);
    $(lis[randomLiIndex]).fadeOut("fast", function() {
      $(lis[randomLiIndex]).attr("src", images[randomImgIndex]);
      $(lis[randomLiIndex]).fadeIn(800);
    }.bind(this));
  }, 2000);

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="changing-grid">
  <li><img class="randomImg" src="img/grid/image/49.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/30.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/15.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/56.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/51.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/16.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/37.jpg"></li>
  <li><img class="randomImg" src="img/grid/image/48.jpg"></li>
</ul>