如何设置图像加载后的身体背景图像？

Question

对于我的网站，我使用高分辨率图片作为我身体的背景。如果我简单地放document.body.style.backgroundImage = "url('URL OF PICTURE')";，我可以在页面上垂直观看图像加载。我只想在文件加载完成后设置背景图片，并在加载时显示我的默认灰色背景。有任何想法吗？

Answer 1

您可以使用Image（）加载它，侦听onload，然后在加载它时将其添加到dom中。

var img = new Image(); 

img.onload = function(){ 
    $container.append('<img src="'+img.src+'" </img>'); 
}; 

img.src = 'imageUrl.jpg'; 

Answer 2

最简单的方法是隐藏主体，直到页面加载完毕。

CSS

body { opacity : 0 }

JS

window.addEventListener("load", function load(e){ 
    // Remove the load event 
    window.removeEventListener("load", load, false); 
    // Set the body opacity to 1 
    document.body.style.opacity = 1; 

    }