I want to add a different answer here. There are a few options you can use to improve your web page performance. Using <link> with preconnect and preload rel value can helps you to load resources before using them:

Use preconnect keyword for the rel attribute to tell the browsers that the user is likely to need resources from this origin and therefore it can improve the user experience by preemptively initiating a connection to that origin.

<link rel="preconnect" href="<your-images-base-url">

Use preload keyword for the rel attribute to declare fetch requests in the HTML's , specifying resources that your page will need very soon. This ensures they are available earlier and are less likely to block the page's render, improving performance. Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

Create preload link:

const preloadLink = document.createElement('link');
document.head.appendChild(preloadLink);
preloadLink.rel = 'preload';
preloadLink.as = 'image';

function preloadNextImage(href) {
  preloadLink.href = href;
}

function switchImage()
{
    curImage = (curImage + 1) % images.length
    document.body.style.backgroundImage = 'url(' + images[curImage] + ')';
    preloadNextImage(/* <next-image-url> */)
}

You could just load the next image when displaying the current one using the JavaScript Image object. When switchImages runs again then the image will be already in the browsers cache. Also, the cached images are stored in a new array, so the cache "generator" will be ran only once. With this snippet you will need enough delay between iterations, so the next image will have enough time to be downloaded from the sever.

var images = ['images/image01.jpg',
                'images/image02.jpg',
                'images/image03.jpg',
                'images/image04.jpg',
                'images/image05.jpg',
                'images/image06.jpg',
                'images/image07.jpg',
                'images/image08.jpg',
                'images/image09.jpg',
                'images/image10.jpg',
                'images/image11.jpg',
                'images/image12.jpg',
                'images/image13.jpg',
                'images/image14.jpg',
                'images/image15.jpg',
                'images/image16.jpg',];
var numSeconds = 2;
var curImage = 0;
var cache = [];
function switchImage()
{
    curImage = (curImage + 1) % images.length;
    document.body.style.backgroundImage = 'url(' + images[curImage] + ')';
    if(images[curImage + 1] && !cache[curImage + 1]) {
      cache[curImage + 1] = new Image();
      cache[curImage + 1].src = images[curImage + 1];
    }
}
window.setInterval(switchImage, numSeconds * 1000);