'Preloading a large background image without rendering the website

I would like to make sure that my image preloads properly, as there's an svg effect, that only looks good when the background is loaded.

function preloader() {
if (document.getElementById) {
    document.getElementById("preload-01").style.background = "url(https://i.imgur.com/a9DM6w8.jpg) 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);

https://codepen.io/bonobonobo/pen/WNdWbZq?editors=0100

I have tried this method, yet it seems ineffective. The above is only a snippet, I have a few other scripts loading as well, and all in all it doesn't do the job.

Is there a mistake in my code?

javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions