How can i make random img background function load faster?

Question

I'm beginner at coding and thats almost my first wesbite to test it i added random background option but it got problem in first load for every background img it take ages that ruin the view because there is overlay div above it so when it changes sometimes it takes time to load so it only shows the overlay which make it look laggy https://special-project-demo.netlify.app/ this is the website to test it and see what i mean when turn on random background option from the side and this the js code

let backgroundArray = ["Background-1.jpg" , "Background-2.jpg" ,"Background-4.jpg" , "Background-5.jpg"]
let isRandom = false; 
let randomInterval;
function randomBackground() {
  if (isRandom === true){
    randomInterval = setInterval(() => {
      let random = Math.floor(Math.random() * backgroundArray.length)
      landing.style.backgroundImage = 'url("imgs/'+backgroundArray[random]+'")'
     } ,7000)
  } else {
    clearInterval(randomInterval)
  }
}
randomBackground()

thats the part control the background

i even set transision 3s for the div and increase the setinterval time and lower the img quailty but it still the same