Question

我每次尝试加载页面时如何添加加载gif图像，我有一个带有链接的管理页面，我希望当我在页面加载之前单击链接时它应该显示gif图像，我在标头标签上添加了一些javascript代码，在body标签中添加了此代码

<div id="loading"></div>

管理页面看起来像这样

<html>
    <head>
    <script type="text/javascript">
        function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        }//preloader
        window.onload = preloader;
</script>
        <title>profile- Admin panel</title>
    </head>
    <body>
<div id="loading"></div>    
<?php include 'includes/connect.php'; ?>
<?php include 'title_bar.php'; ?>
<link rel="stylesheet" href="css/loading.css">

<h3>admin panel system</h3>
<p> you are logged in as <b><?php echo $username?></b> [<?php echo $level_name;?>]</p>
<?php
if($user_level != 1){
 header('location : profile.php');

}

?>

<p>
 <ul class="dash">                          
            <li>
            <a href="#" title="Report" class="tip" data-placement="bottom" >
            <img src="images/icons/report.png" alt="" />
            <span>Report</span>
            </a>
            </li>

             <li>
            <a href="view.php" title="Customers" class="tip" data-placement="bottom" >
            <img src="images/icons/customers.png" alt="" />

            <span>Customers</span>
            </a>
            </li>
            </ul>

</p>
<p>
<?php
if(isset($_GET['type']) && !empty($_GET['type'])){
?>
<table>
<tr><td width='150px'> Users</td><td>Options</td></tr>
<?php
 $list_query = mysql_query("SELECT id, username, type FROM users");
 while($run_list = mysql_fetch_array($list_query)){
  $u_id = $run_list['id'];
  $u_username = $run_list['username'];
  $u_type = $run_list['type'];
 ?>
 <tr><td><?php echo $u_username?></td><td>
 <?php
 if($u_type == 'a'){
     echo "<a href='option.php?u_id=$u_id&type=$u_type'>Deactivate</a>";

} else{

    echo "<a href='option.php?u_id=$u_id&type=$u_type'>activate</a>";
}


 ?>

 </td></tr>
 <?php
 }
?>
</table> 
<?php

} else{

   echo "Select Options Above";
}

?>

</body>
</html>

这就是我在loading.css中所拥有的

div#content {
    display: none;
    }

div#loading {             
    top: 200 px;
    margin: auto;
    position: absolute;
    z-index: 1000;
    width: 160px;
    height: 24px;
    background: url('../images/loading (1).gif') no-repeat;
    cursor: wait;                
    }

Answer 1

您错过了内容div。你需要在一个带有id＆＃34; content＆＃34;。

的div中将所有东西都包装在装载器之外

<div id="content">
<h3>admin panel system</h3>
    ...
</div>
</body>

除此之外，在一个简单的页面上，加载事件将非常快速地触发。除非页面上有很多图像，否则用户可能只会看到闪烁。如果您真的希望他们看到页面，那么您可以为预加载功能添加半秒延迟。

function preloader(){
    setTimeout(function(){    
        document.getElementById("loading").style.display = "none";
        document.getElementById("content").style.display = "block";
    }, 500);
}//preloader

您还可以尝试在onunload函数中反转预加载（隐藏内容，再次显示加载）以更改页面。如果您的页面需要一段时间来处理（慢速数据库调用等），您可以在处理发生之前查看将页面刷新到加载div的末尾。 http://php.net/manual/en/function.flush.php

但最终，我建议装载机比它的价值更麻烦，只会让用户烦恼。当您完全控制请求周期时，装载程序通常可以使用ajax，但在这种情况下，我不确定。实验，看看什么效果最好。祝你好运。

如何将加载gif图像添加到我的网页

1 个答案: