How to preload an image in JS?

Question

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.

score 0 · Answer 1 · answered Apr 24 '22 at 08:50

0

What about using window.onload to load all the pictures from URLs and store them into an array?

answered Apr 24 '22 at 08:50

Tin Po Chan

97
1
3

score 0 · Answer 2 · answered Apr 24 '22 at 08:50

You can find it here : Preloading images 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 are setting up the actual preloading by targeting specific preload elements with background styles that call the various images. Thus, to use this method, you will need to replace the “preload-01”, “preload-02”, “preload-03”, etc., with the IDs that you will be targeting in your markup. Also, for each of the background properties, you will need to replace the “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 are using the addLoadEvent() function to delay execution of our preloader() function until after the page has loaded.

Source: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

How to preload an image in JS?

2 Answers2