let i = 0;

function change() {
  if (i < res.length) document.getElementById("cont").style.backgroundImage = `url(static/letters/${res[i  ]}.jpg)`;
}
window.onload = function() {
  setInterval(change, 2000);
};

I want this change only once till all the images get displayed and then want the container empty. What's wrong with my code?

CodePudding user response：

You can check this implementation

let i = 0;

let interval //the variable to keep the current interval

//simulate your `res` data 
const res = [
  "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
  "https://images.unsplash.com/photo-1612151855475-877969f4a6cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aGQlMjBpbWFnZXxlbnwwfHwwfHw=&w=1000&q=80",
  "https://www.w3schools.com/w3css/img_lights.jpg"
]

function change() {
  if (i < res.length) {
    document.getElementById("cont").style.backgroundImage = `url(${res[i  ]})`;
  } else {
    document.getElementById("cont").style.backgroundImage = "none";
    clearInterval(interval); //remove the current interval after finish the loop
    i = 0; //reset index value
  }

}
window.onload = function() {
  interval = setInterval(change, 2000); //set the current interval
};

#cont {
  height: 300px;
  width: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 300px 300px;
  transition: 0.2s;
}

<div id="cont"></div>

CodePudding user response：

This might do the job :

if (i < res.length) document.getElementById("cont").style.backgroundImage = `url('static/letters/${res[i  ]}.jpg')`;