我有一个问题,我的网络应用程序加载大图像作为背景。它应用于 <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
- 加载图片后,将背景更改为图片
最佳答案
您可以在 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();
});
关于javascript - 加载所有元素后更新背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27899987/