javascript - Browser requests the same files declared in a setInterval

Question

I use JavaScript to change the background-image of a div dynamically every 4 seconds. my code looks like this:

const images = [
    'img/landing-min.jpg',
    'img/gallery-1.jpg',
    'img/side-img.jpg',
];

window.onload = () => {
    const landing = document.getElementById('landing');
    landing.dataset.i = 0;
    setInterval(() => {
        landing.style.backgroundImage = `url(${images[landing.dataset.i]})`;
        landing.dataset.i = (landing.dataset.i+1) % images.length;
    }, 4000)
}

The problem is that the browser makes a request to get the file each time the interval changes the background image, which makes a lot of duplicate requests. I want all files to be requested only once.

question from:https://stackoverflow.com/questions/65847004/browser-requests-the-same-files-declared-in-a-setinterval

Answer 1

Waitting for answers