Again, IDK what you are trying to prove or do.
This is a way of preloading the images that you may want to display when a next button is clicked.
You are able to preload the image at the time the main image is displayed. I wrote a gallery that would preload images only when the next button was clicked, then the next image would show and the next image to be shown would be queued.
It saved on bandwidth that way allowing the progress to be incremental, clicking back would take back to the previous image, because it was preloaded, it was already available.
This was achieved with storing new Image() references in to an array.
imagesNeedingLoading = ["sunset","shoreline","mountains","lakes","nightsky"];
imagesLoaded = ;
loadImage = imagesNeedingLoading.shift();
img = new Image();
img.name = loadImage;
img.src = "./assets/headers/"+loadImage+".jpg";
imagesLoaded.push( img );
targetImage = document.images.placeholdername;
targetImage.src = imagesLoaded; // first image
<img name="placeholdername" src="first.jpg" height="100" width="300">
Is an example of a type of loader I used first, all from memory, no idea if it works because I am sure there is something missing but you should get the general idea of what I was doing to load.
for more info, look this up on MDN or W3Schools.