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

装载网页背景图像的Fow

1 个答案: