How to set background image of body after image is loaded?

Question

For my site, I am using high-res pictures for the background of my body. If I simply put document.body.style.backgroundImage = "url('URL OF PICTURE')";, I can watch the image load vertically down the page. I want to only set the background image once the file has been loaded, and show my default grey background while it is loading. Any ideas?

Answer 1

You could use Image() to load it, listen for onload and then add it to the dom when it is loaded.

let img = new Image();

img.onload = function(){
    document.body.style.backgroundImage = "url('" + img.src + "')";
};

img.src = 'imageUrl.jpg';