javascript - 加载所有元素后更新背景

Question

我有一个问题，我的网络应用程序加载大图像作为背景。它应用于 <style> body 顶部的标签标签。它可以工作，但是当打开页面时，加载图像时会显示白色背景。

我希望能够设置 background-color在图像加载时变为特定的蓝色，所以我这样做了:

在正文结束标签之前:

     <script type="text/javascript">
        $(document).foundation();
        $(document).ready(function() {
            document.body.style.backgroundImage="url('img/form_bg.jpg')";
            //$('body').css('background-image', 'url(img/form_bg.jpg) no-repeat center center fixed');
        });
    </script>

但是这段代码不会工作，背景也不会加载。这个棒:

body {
    /*background:transparent;*/
    background-color:#2f3255;
}

我怎样才能做到这一点:

1. 在图片加载时设置背景色:#2f3255
2. 加载图片后，将背景更改为图片

Answer 1

您可以在 DOM 中添加一个额外的 div (#intro)，它在加载背景图像时覆盖整个屏幕:

CSS:

#intro {
   width: 100%;
   position: fixed;
   top: 0;
   bottom: 0;
   z-index: 100;
   background-color:#2f3255;
}

然后，当页面加载时，隐藏那个 div:

$(window).load(function() {
    // You could add a time out here if you like (setTimeout(function() { $('#intro').fadeOut();   }, 500))
    $('#intro').fadeOut();    
});