Question

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

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

到＆lt; head＆gt; ...＆lt; / head＆gt;部分然后：

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

到我的身体标签，希望当整个页面准备好时，整个身体（及其背景）将被隐藏并立即显示。然而，这不会发生。当我刷新页面时，我仍然在其他内容之前看到我的背景图像。

我做错了什么？

谢谢！

Answer 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隐藏页面背景

1 个答案: