Question

我想要隐藏我的网页正文。一旦网页的body标签的所有内容都准备好显示我想要显示它的身体，但直到那时我想显示一些加载图像。

如果由于某种原因身体内容无法正确加载，我想显示错误信息。

在javascript中执行此操作的最佳方式是什么？

Answer 1

实际上这很简单。您必须在页面上放置一个全屏div，并在触发onload功能后隐藏它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
        #loading-overlay {
            position: absolute;
            z-index: 1000;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            background-color: #003366;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="loading-overlay">This is a loading screen</div>

    <p>The page has loaded!</p>

    <!-- The following is to slow down the page load so that the effect can be observed -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=10"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1232"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12341"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123459"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234568"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12345677"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567863"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567891"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
    <script type="text/javascript">        
        $(function() {
            $("#loading-overlay").hide();
        });
    </script>
</body>
</html>

如何在实际车身载荷之前显示加载图像？

1 个答案: