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

我怎样才能做到这一点：

在图片加载时制作背景色：＃2f3255
加载图像时，将背景更改为图像

Answer 1

您可以在DOM（#intro）中添加一个额外的div，它会在加载背景图片时覆盖整个屏幕：

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

Answer 2

您可以预先加载图片并在下载后应用，例如：

var backgroundImage = new Image();
backgroundImage.onload = function() {
    document.body.style.backgroundImage = "url('" + this.src + "')";
}
backgroundImage.src = 'img/form_bg.jpg';

第一次下载缓存图像，因此第二次浏览器尝试请求它并将其作为背景应用时，它会从那里获取它。此外，如果图像已经从先前的请求中缓存，那么＆＃34; onload＆＃34;立即触发。你不必将它包装在＆＃34; body.onload＆＃34;功能或＆＃34; $（文件）.ready（）＆＃34;如果你希望它可见，即使页面仍在加载。

编辑：这是一个jsfiddle - link

加载所有项目后更新背景

2 个答案: