通过javascript隐藏页面背景答案

【问题标题】：Hide page background via javascript通过javascript隐藏页面背景
【发布时间】：2011-05-18 09:32:34
【问题描述】：

我有这个基本的页面结构：

<head>
...
    <link rel="stylesheet" type="text/css" href="template.css" media="screen" />
</head>

<body>
...
</body>

页面背景图片在template.css文件中设置：

body {
...
    background-image: url("../images/texture.jpg");
}

当页面加载时，我首先看到我的背景，然后显示其他内容。我想一次显示整个页面。为此，我添加了：

<style type="text/css">
body {
    visibility: hidden;
}
</style>

到

... 部分，然后：

<body onload="document.body.style.visibility='visible'">

到我的正文标签，希望整个正文（及其背景）最初会在整个页面准备好时立即隐藏和显示。然而，这不会发生。刷新页面时，我仍然会在其他内容之前看到我的背景图片。

我做错了什么？

谢谢！

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以隐藏整个页面并在 dom-ready 元素启动后“显示”它，这是一件非常容易的工作：

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <style>
            body{
                background: green;
                display: none;
            }
        </style>
        <div id="lotsandlotsofstuff">[...]</div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <script>  
        $('document').ready(function(){
            $('body').fadeIn();
        });
        </script> 
    </body>
    </html>

【讨论】：

如果页面上出现 javascript 错误或用户禁用了 javascript，则该页面将永远不会显示。