Prevent double images in function using Math.random

Question

I have a function that adds random images to my divs that disappear over time and create a mouse trail. My issue is: there are double images.

I'd like to add something that checks if the background url is already located on the page and if that's the case, skips to the next in the array and check it again until until it comes across one that is not there. So like a loop that refreshes every time a 'trail' is being created.

Maybe I am asking for something that won't work? What if all the images are already on the page? I don't really have an answer for it and I also don't have an idea how to solve that problem yet.

For now I tried adding a counter that checks the usedImages and counts them, but it seems to have flaws and I am unsure where to look or how to fix it. Does anyone have any tips on how to do this? Is it even possible?

My fiddle

var bgImages = new Array(
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/05/schraegluftbild-1024x725.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/05/pikto-608x1024.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/05/Jettenhausen-EG-Grundriss-913x1024.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/05/lageplan-945x1024.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/05/Jettenhausen-EG-Grundriss-913x1024.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/05/Jettenhauser-Esch-Modell-2-1024x768.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/07/DSCN3481-1024x768.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2019/07/zoom-in-3_ASTOC-1024x683.jpg",
  "https://www.studiourbanestrategien.com/wordpress/wp-content/uploads/2016/07/IMG_1345-1024x768.jpg"
);

const numberOfImages = 10;
const timesPerSecond = .1;
var usedImages = {};
var usedImagesCount = 0;

function preloadImages(images) {
  for (i = 0; i < images.length; i++) {
    let l = document.createElement('link')
    l.rel = 'preload'
    l.as = 'image'
    l.href = images[i]
    document.head.appendChild(l);
  }
}

function animate(e) {
  var image = document.createElement('div');
  image.classList.add('trail');
  var sizew = 200;
  var sizeh = 200;
  image.style.transition = '3s ease';
  image.style.position = 'fixed';

  image.style.top = e.pageY - sizeh / 2 + 'px';
  image.style.left = e.pageX - sizew / 2 + 'px';

  image.style.width = sizew + 'px';
  image.style.height = sizeh + 'px';

  var random = Math.floor(Math.random() * (bgImages.length));

  if (!usedImages[random]) {
    image.style.backgroundImage = "url(" + bgImages[random] + ")";
    usedImages[random] = true;
    usedImagesCount++;
    if (usedImagesCount === bgImages.length) {
      usedImagesCount = 0;
      usedImages = {};
    }
  } else {
    animate(e);
  }

  console.log(usedImages);
  console.log(usedImagesCount);

  image.style.backgroundSize = 'cover';
  image.style.pointerEvents = 'none';
  image.style.zIndex = 1;
  document.body.appendChild(image);

  //opacity and blur animations
  window.setTimeout(function() {
    image.style.opacity = 0;
    image.style.filter = 'blur(20px)';
  }, 40);

  window.setTimeout(function() {
    document.body.removeChild(image);
  }, 2100);
};

window.onload = function() {
  preloadImages(bgImages);
  var wait = false;

  window.addEventListener('mousemove', function(e) {
    if (!wait) {
      wait = true;
      setTimeout(() => {
        wait = false
      }, timesPerSecond * 800);
      animate(e);
    }
  });
};