加载网页背景图像的Fow

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();
});