加载网页背景图像的情况下

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