javascript - 加载网页背景图片的流程

Question

我有一个网页，我为此使用了非常大尺寸的背景图片，问题是当我们通常访问该页面时，它会显示网站内容然后加载背景图片。

在我的情况下，情况有所不同，我的网页正在等待加载背景图像，然后开始显示页面内容。

我使用非常简单的 CSS

body{background-image:url('http://www.example.com/myimage.jpg')}
other css goes here....

和网页负载流是

Background image load first (webpage display no contents it just load the image)  
     |
then load the contents.

我想先加载内容，然后再加载背景图像，任何人都知道如何做到这一点。（使用简单的方法）或背景图像和内容的异步加载。

Answer 1

简单的解决方案：

只需在加载时通​​过 css 添加背景图像：

// in header of page
window.onload = function(){
    document.body.style.backgroundImage = "url('http://www.example.com/myimage.jpg')";
}

更复杂的解决方案：

如果你想让它看起来更好，你可以添加一个图像元素，当它完成加载时，将它淡入背景（使用 jQuery）

// in header of page (make sure to include jQuery)
$(window).load(function(){
    var img = new Image();
    img.src = "http://www.example.com/myimage.jpg";
    $(img).addClass("bgImgStyle").hide().prependTo("body").fadeIn();
});