I'm trying to preload image files with JavaScript. The <img> elements itself will be added to the DOM after the page has already loaded, so using a <link rel="preload"> isn't possible in my case. I have tried the following code, however it doesn't seem to work in my code, as the images still seem to be loaded after the actual elements are added.
const image = new Image();
image.src = "/path/to/image.png";
I cannot figure out why this isn't working, as nearly every existing thread here has this as its accepted answer.
What about using window.onload to load all the pictures from URLs and store them into an array?
You can find it here: Image Preloading with JavaScript
function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);In the first part of this script, we're setting up the actual preload by targeting specific preload elements with background styles that call the various images. So to use this method, you'll need to replace "preload-01", "preload-02", "preload-03", etc. with the IDs you'll be targeting in your markup. Also, for each of the background properties, you'll need to replace "image-01.png", "image-02.png", "image-03.png", etc. with the path and name of your image. files No other editing is required for this technique to work.
Then, in the second part of the script, we're using the addLoadEvent() function to delay the execution of our preloader() function until the page has loaded.
Source: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/