如何在图像加载后设置正文的背景图像？

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;

  }