Question

我正在尝试制作加载屏幕。当主页面加载时，我想显示加载图像，当主页停止加载时，我希望加载图像消失。

这是我的loading.php：

<!DOCTYPE html>
<html>
<head>
    <title>loading</title>

    <!-- Include the heartcode canvasloader js file -->
    <script src="javascript.js"></script>


    <style type="text/css">
        body, html {
            margin:0;
            padding:0;
            overflow:hidden;
            background-color:#ffffff;
        }
        .wrapper {
            position:absolute;
            top:50%;
            left:50%;
        }
    </style>
</head>
<body>

    <div id="canvasloader-container" class="wrapper"></div>


    <script type="text/javascript">
        var cl = new CanvasLoader('canvasloader-container');
        cl.setColor('#0c0d0c'); 
        cl.setDiameter(60); 
        cl.setDensity(65); 
        cl.setFPS(45); 
        cl.show(); 

        var loaderObj = document.getElementById("canvasLoader");
        loaderObj.style.position = "absolute";
        loaderObj.style["top"] = cl.getDiameter() * -0.5 + "px";
        loaderObj.style["left"] = cl.getDiameter() * -0.5 + "px";
    </script>
</body>
</html>

这是我的mainpage.php：

<?php

session_start();

$username = $_SESSION['username'];

?>


<html>
<head>
<title>
FUMC SCAN INVENTORY SYSTEM
</title>
</head>


       <link rel="icon" type="image/png" href="fumc.png">


    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
    <link href="css/bootstrap.css" rel="stylesheet" >
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/local.css" />

    <style>
            body{
                margin:0;
                padding:0;
                background-image: url("backimage.jpg");  
               }
            .title{
                width:1000px;
                height:144px;
                position:absolute;
                top:15px;
                left:100px;
                background:transparent url(una.png) no-repeat top left;
            }

            .home{
                width:50px;
                height:50px;
                position:absolute;
                top:60px;
                left:1030px;
                background:transparent url(home.png) no-repeat ;

            }

            .status{
                width:50px;
                height:50px;
                position:absolute;
                top:60px;
                left:1100px;
                background:transparent url(status.png) no-repeat ;

            }


            .putragis{
                width:-10px;
                height:100px;
                position:absolute;
                top:50px;
                left:1150px;
            }

            .about{
                width:1000px;
                height:400px;
                position:absolute;
                top:190px;
                left:150px;
                background:transparent url(about.png) no-repeat ;

            }

            .us{
                width:1000px;
                height:400px;
                position:absolute;
                top:530px;
                left:150px;
                background:transparent url(us.png) no-repeat ;

            }

            .rotate:hover
        {
            -webkit-transform: rotateZ(-30deg);
            -ms-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
        }
        .grow:hover
        {
            -webkit-transform: scale(1.3);
            -ms-transform: scale(1.3);
            transform: scale(1.3);
                -webkit-transition:transform 0.5s ease;
        }
                .shrink:hover
        {
            -webkit-transform: scale(0.8);
            -ms-transform: scale(0.8);
            transform: scale(0.8);
        }

        .capitalize {
    text-transform: uppercase;
                     }

    </style>

<body background="backimage.jpg">





    <div class="title" style="margin-left:50px;"><font style='margin-left:1158px;'><b><a  style='color:Transparent;'></a></b></font></div>

    <br><br><br> <br><br><br><br><br><br>


    <?php

    mysql_connect('localhost','root','');
    mysql_select_db('fumc');

    $sql = mysql_query(" SELECT * FROM account WHERE username = '".$username."' ");

    while($data=mysql_fetch_array($sql)){

        $fullname = $data['fullname'];

    ?>

    <font class="capitalize" style="color:green;margin-left:530px;"><b><i><?php echo $data['department'];?></i></b></font>        

    <?php } ?>


    <br><br>       

            <div style="border:10px solid RED;height:300px;margin-left:210px;width:850px;border-color:green;">
            <div style="border:2px solid RED;height:292px;;width:842px;border-color:white;margin-top:-6px;margin-left:-6px;">


                    <a href='it-request.php'><div class="glyphicon glyphicon-list-alt grow" style="margin-left:110px;color:green;font-size:100px;top:70px;"></div></a>  
                    <a href='inventory.php'><div class="glyphicon glyphicon-briefcase grow" style="margin-left:150px;color:green;font-size:100px;top:70px;"></div></a>  
                    <a href='login.php'><div class="glyphicon glyphicon-off grow" style="color:green;margin-left:150px;font-size:100px;top:70px;"></div></a>

                <br><br><br><br><br><br>


                    <font style='margin-left:130px;color:green;' ><b>REQUEST</b></font>
                    <font style='margin-left:173px;color:green;'><b>INVENTORY</b></font>        
                    <font style='margin-left:175px;color:green;'><b>LOG-OUT</b></font>    

    </div>            
    </div>

            <br><br><br>
            <center>
    <div  style='color:green;'>


        <?php   echo "Welcome ".$fullname.".!";    ?>

        <br><br>

    &copy; 2015-2016 Copyright University of Caloocan City. All Right Reserved.


    </div>    
            </center>


</body>
</html>

Answer 1

您可以在主页面中显示链接到加载页面的iframe。

<iframe src="loading.php" id='iframe'></iframe>
<!-- ^^ style iframe accordingly to center it or whatever -->

并将以下代码添加到主页：

<script>
window.onload = function() {
    document.getElementById('iframe').style.display = "none";
}
</script>

这将显示一个iframe，并且仅在文档完全加载时隐藏它，但是从主页面中的代码来看，它似乎不会花费那么长时间来加载。

如何在加载主页面时显示“加载屏幕”？

1 个答案: