-4

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

<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;                
    }
4

1 回答 1

1

您缺少内容 div。您需要将除加载器之外的所有内容都包装在 id 为“内容”的 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，但在这种情况下我不确定。试验一下，看看什么效果最好。祝你好运。

于 2013-05-03T10:23:13.597 回答